vue-echarts画深度图

vue-echarts画深度图安装vue-echarts依赖cnpminstallvue-echarts–save按需引入vue-echarts绘制深度图全局引入会将所有的echarts图表打包,导致体积过大,这里推荐按需引入。<template><div><h2>深度图</h2><e-chartsauto-res…

大家好,又见面了,我是你们的朋友全栈君。

安装vue-echarts依赖

cnpm install vue-echarts --save

按需引入vue-echarts绘制深度图

全局引入会将所有的echarts图表打包,导致体积过大,这里推荐按需引入。

<template>
  <div>
    <h2>深度图</h2>
    <e-charts auto-resize :options="deptChartOption" @legendselectchanged="legendSelectChanged"></e-charts>
  </div>
</template>

<script> import ECharts from 'vue-echarts/components/ECharts'; require('echarts/lib/chart/line'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/legendScroll'); export default { components: {ECharts}, data() { return { deptChartOption: { grid: {left: 10, top: 30, right: 10, bottom: 10}, tooltip: { confine: true, trigger: 'axis', axisPointer: {type: 'line', lineStyle: {color: 'rgba(0, 0, 0, 0)'}}, backgroundColor: '#355475', textStyle: {color: '#fff', fontSize: '14px'}, extraCssText: 'box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);border-radius: 4px;' }, legend: { data: [ {name: '买单', icon: 'rect'}, {name: '卖单', icon: 'rect'} ], selected: { '买单': true, '卖单': true }, itemWidth: 10, itemHeight: 10, textStyle: {color: '#fff'}, pageIconColor: '#4CC453' }, xAxis: { type: 'category', axisLine: {show: false}, axisTick: {show: false}, axisLabel: {show: false}, boundaryGap: false, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, yAxis: [{ type: 'value', axisLine: {show: false}, axisTick: {show: false}, axisLabel: {show: false}, splitLine: {show: false} }], series: [ { name: '买单', type: 'line', smooth: true, symbol: 'circle', showSymbol: false, symbolSize: 3, sampling: 'average', itemStyle: {normal: {color: '#4cc453'}}, lineStyle: {normal: {color: '#243235'}}, areaStyle: {color: '#243235'}, data: [10, 9, 8, 5, 1, '', '', '', '', ''] }, { name: '卖单', type: 'line', smooth: true, symbol: 'circle', showSymbol: false, symbolSize: 3, sampling: 'average', itemStyle: {normal: {color: '#e94c4c'}}, lineStyle: {normal: {color: '#392332'}}, areaStyle: {color: '#392332'}, data: ['', '', '', '', '', 0, 2, 3, 6, 8] } ] } }; }, mounted() { this.deptChartOption.tooltip.formatter = this.deptChartHover; }, methods: { legendSelectChanged(obj) { const selected = obj.selected; if (selected) { this.deptChartOption.legend.selected[obj.name] = selected[obj.name]; } }, deptChartHover(value) { let result = ''; value.map(item => { if (item.value !== '') { result = value[0].axisValue + item.value; } }); return result; } } }; </script>

其它样式调整可详见echarts官网的配置项手册。 —— [ echarts配置项手册 ]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/144782.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • stm32 SWD调试接口的使用

    stm32 SWD调试接口的使用SWD和传统的调试方式区别   1.SWD模式比JTAG在高速模式下面更加可靠。在大数据量的情况下面JTAG下载程序会失败,但是SWD发生的几率会小很多。基本使用JTAG仿真模式的情况下是可以直接使用SWD模式的,只要你的仿真器支持。所以推荐大家使用这个模式。   2.在大家GPIO刚好缺一个的时候,可以使用SWD仿真,这种模式支持更少的…

  • ACM 各大OJ平台以及题目分类[通俗易懂]

    ACM 各大OJ平台以及题目分类[通俗易懂]本文章转自:http://blog.csdn.net/liujiuxiaoshitou/article/details/7  OJ是OnlineJudge系统的简称,用来在线检测程序源代码的正确性。著名的OJ有RQNOJ、URAL等。国内著名的题库有北京大学题库、浙江大学题库等。国外的题库包括乌拉尔大学、瓦拉杜利德大学题库等。简介:  OnlineJudge系统(简

  • 交换机telnet配置

    交换机telnet配置

  • pytorch交叉熵损失函数_yolov5损失函数

    pytorch交叉熵损失函数_yolov5损失函数均方损失函数:这里,loss,x,y的维度是一样的,可以使向量或者矩阵,i是下标。很多的loss函数都有size_average和reduce两个布尔类型的参数,因为一般损失函数都是直接计算batch的数据,因此返回的loss结果都是维度为(batch_size,)的向量。1)如果reduce=False,那么size_average参数失效,直接返回向量形式的loss2)如果…

  • ringbuffer的常规用法_c语言fputs

    ringbuffer的常规用法_c语言fputs一、ringBuffer介绍ringBuffer称作环形缓冲,也有叫circleBuffer的。就是取内存中一块连续的区域用作环形缓冲区的数据存储区。这块连续的存储会被反复使用,向ringBuffer写入数据总是从写指针的位置开始,如写到实际存储区的末尾还没有写完,则将剩余的数据从存储区的头开始写;从该ringBuffer读出数据也是从读指针的位置开始,如读到实际存储区的末尾…

  • Databus for Mysql

    Databus for Mysql首先准备Mysql环境,本次使用的Mysql版本是5.7root/Welcome_1:33061.配置mysqlmysql需要配置的有三点:开启binlog,设置binlog格式为ROW(mysql5.7版本默认格式就是ROW,所以这里我没有更改)禁用binlog_checksum开启binlog的方法:vim/etc/my.cnf##添加如下内容:server-id…

    2022年10月16日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号