vue-echarts画深度图
2023-06-13 09:11:31 时间
大家好,又见面了,我是你们的朋友全栈君。
安装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配置项手册 ]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144782.html原文链接:https://javaforall.cn
相关文章
- 手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- Vue.js - 使用Vue实现简简单单的分页功能
- 使用Vue写一个登录页面
- vue入门基础教程之经验总结篇(小白入门必备)|建议收藏「建议收藏」
- vue beforeEach 跳转问题
- 写给vue转react的同志们(4)
- Vue笔记(10) vue-router
- vue-cli 初始----安装运行Vue项目
- vue源码分析-从new Vue开始
- Vue 动画与脚手架
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue生成二维码_生成二维码插件
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 【vue】牛客专题训练03
- vue axios轮询更新echarts 页面崩溃问题
- vue中v-cloak解决刷新或者加载出现闪烁显示变量问题
- 测试开发之前端系列!Vue 通信方式 slot (插槽)的分类
- vue : 无法加载文件 C:UsersxuhuichenAppDataRoamingnpmvue.ps1
- Vue使用router设置页面title
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- linux下快速部署Vue项目(linux部署vue)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)