18年下班年用的vue + echarts,现在才想起来总结,着实不敬业
线上的项目叫股往(http://rich.xchol.com/#/)
好了,进入正题:
首先,需要新建一个vue的项目,在vue项目的基础上,安装echarts的依赖
npm install echarts -S
全局引入echarts 第一步:找到src文件下的main.js第二步:
import echarts from ‘echarts‘ Vue.prototype.$echarts = echarts
页面里可以通过$echarts来使用echarts
如图:
好了,接下来就是vue + echarts联用了
先看一下,正常的echarts展示需要哪些数据
option = { title: { text: ‘折线图堆叠‘ }, tooltip: { trigger: ‘axis‘ }, legend: { data:[‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘直接访问‘,‘搜索引擎‘] }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘] }, yAxis: { type: ‘value‘ }, series: [ { name:‘邮件营销‘, type:‘line‘, stack: ‘总量‘, data:[120, 132, 101, 134, 90, 230, 210] }, { name:‘联盟广告‘, type:‘line‘, stack: ‘总量‘, data:[220, 182, 191, 234, 290, 330, 310] }, { name:‘视频广告‘, type:‘line‘, stack: ‘总量‘, data:[150, 232, 201, 154, 190, 330, 410] }, { name:‘直接访问‘, type:‘line‘, stack: ‘总量‘, data:[320, 332, 301, 334, 390, 330, 320] }, { name:‘搜索引擎‘, type:‘line‘, stack: ‘总量‘, data:[820, 932, 901, 934, 1290, 1330, 1320] } ] };
下图为呈现的效果
可以看到,简单的折现统计图,需要的数据data里的具体内容对于echarts来说,初始化相当重要,所以,不论是新建一个组件、还是直接写在页面内,初始化都是必要的,即使是展示或隐藏任意折现图,都要初始化(这里有个小坑,如果数据变化没有初始化,是不会展示相应的折线图的) 我的是将需要改变的值封在组建里,idName以及dataJson是我要用的数据或数据集合
dataY是纵轴的数据集合,如果监听到它的变化,就会重新初始化echarts,父组件通过props传数据给子组件
而通用的data里的数据,在页面data内直接写
dataArr: { legend: { type: ‘scroll‘, data: [], left: 0, top: 30, height: ‘‘, }, tooltip: { trigger: ‘axis‘, confine: true, textStyle: { align: ‘left‘ } }, toolbox: { left: 0, show: true, feature: { mark: { show: true }, dataZoom: { show: true }, dataView: { show: false, readOnly: false }, magicType: { show: true, type: [‘line‘, ‘line‘] }, restore: { show: true }, saveAsImage: { show: true } } }, grid: { left: 0, //grid 组件离容器左侧的距离。 top: 70, right: 0, containLabel: true }, xAxis: { data: [] }, yAxis: [], dataZoom: [{ type: ‘inside‘, start: 0, end: 100 }, { start: 0, end: 100, handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘, handleSize: ‘100%‘, handleStyle: { color: ‘#fff‘, shadowBlur: 3, shadowColor: ‘rgba(0, 0, 0, 0.6)‘, shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [] }
具体的echarts数据交互,可以直接看echarts的文档,https://echarts.baidu.com/api.html#echarts
代码如此简单,竟引无数英雄在此折腰
有不明白的、或者自己特有的问题,可以评论或直接找我哦
知无不言、言无不尽
原文地址:https://www.cnblogs.com/tongjiaojiao/p/10489129.html
时间: 2024-10-09 00:21:16