一、echarts3.0(官网: http://echarts.baidu.com/)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -s 引入的方式有两种: 1、main.js中全局引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 然后在组件中通过 this.$echarts.init(document.getElementById('your_div')) 来初始化 2、只应用基本包,加快加载速度 在需要使用echarts的组建中引入: let echarts = require('echarts/lib/echarts') 然后通过 echarts.init(document.getElementById('your_div')) 来初始化 使用的话就比较简单,直接将官方实例封装一个为方法,在mounted中调用即可。 |
二、 echarts2.0(官网: http://echarts.baidu.com/echarts2/)
1 2 3 4 5 |
1、引入 到官网下载echarts2.0的包echarts-all.js,放到static下面,然后在index.html中引用: <script type="text/javascript" src="./static/echarts-all.js"></script> 2、使用 直接封装一个方法,在mounted中调用,通过 echarts.init(document.getElementById('your_div')) 来初始化 |
三、可能适合你的做法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
1、便于数据变更的处理方法是: 首先在 data 中定义全局变量 data(){ return{ myChart: null, option: [] } } 然后在 mounted 中将获取到的dom节点赋值给myChart this.myChart = echarts.init(document.getElementById('myChart')) 在 methoes 中封装一个方法 drawLine() methods: { drawLine (option) { this.myChart.setOption({ //此处调用需要的图表参数及方法 }) } } 在 watch 中监听接口数据以及将数据格式化后传给图表参数,并初始化图表 watch: { yourData: { deep: true, handler (v, ov) { if (v.length > 0) { //格式化数据并传给图表参数option } this.myChart.clear();// 重绘之前清理画布 this.drawLine(this.option) } } } 2、假如你使用了折线图,需要实现一个鼠标点击图表调用接口,并且将数据自定义渲染的功能,可以使用如下做法: tooltip: { trigger: 'axis', triggerOn: 'click',//鼠标点击时触发 axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow'// 默认为直线,可选为:'line' | 'shadow' }, formatter: function (params, ticket, callback) { var content = ''; for (var i = 0; i < params.length; i++) { if (params[i].name) { content += "<div class='tootipBox'><div class='tootipDate'>" + params[i].name + "</div>"; break; } } for (var i = 0, key = {}; i < params.length; i++) { key = params[i]; if (typeof key.value === 'undefined' || key.value === '-'){ key.value = '暂无'; } content += "<div class='tootipContent' style='border-bottom: solid 1px #fff;'><i style='background-color: " + key.color + " '></i> " + key.seriesName + " : " + key.value + "</div>"; } that.$store.dispatch('youInterfaceMethod', param).then((data, index) => { if (data && data.code == 1) { that.appDataArr = data.data if (data.data.length > 0) { for (var i = 0; i < data.data.length; i++) { content += '<div class="tooltip">' + that.item[i].str '</div>'; } } else { content += '<div class="tooltip">' + 'Loading...' + '</div>'; } content += '</div>'; callback(ticket, content) } }) return "Loading"; } } 3、假如你使用了模拟迁徙图(本例子是echarts2.0版本的方法),想把接口返回的但是在 geoCoordMap 里找不到的城市,在地图上显示成未知,可以使用如下做法: 首先,在 geoCoordMap 里插入一条数据,名称为 "未知",坐标自定义; 然后,data 中定义变量: data(){ return{ total: 0, SHData: [], SHSCircleData: [], myChart: null, valueArr: [], maxNum: 0, unknowArea: {}, unknowCount: 0 } } 然后在 watch 中格式化数据: watch: { yourData: { deep: true, handler (v, ov) { this.total = 0 this.SHData = [] this.SHSCircleData = [] this.unknowArea = {} this.unknowCount = 0 if (v.length > 0) { v.forEach((item) => { this.total = this.total + item.count if (item.count === 0) return if (item.city == '未知' || !this.geoCoordMap.hasOwnProperty(item.city)) { // 若item.city '未知' 或者在对象 'geoCoordMap' 中不存在 this.unknowCount += item.count this.unknowArea = {name: '外太空', value: this.unknowCount} return; } this.SHData = this.SHData.concat([[{name: '上海'}, {name: item.city, value: item.count}]]) this.SHSCircleData = this.SHSCircleData.concat([{name: item.city, value: item.count}]) }) this.SHData = this.SHData.concat([[{name: '上海'}, this.unknowArea]]) this.SHSCircleData = this.SHSCircleData.concat([this.unknowArea]) } this.myChart.clear();// 重绘之前清理画布 this.myChart.setOption(this.option(this.SHData, this.SHSCircleData)) } } } methods封装方法: option(SHData, SHSCircleData){ return { //调用方法及参数 //特别提出一个,关于颜色的,取返回数据的总数除以数组长度然后再取整,会让颜色一直都像放烟花 dataRange: { show: true, min: 0, max: parseInt(this.total/this.SHData.length), calculable: true, color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'], textStyle: { color: '#fff' } } } } mounted调用: mounted () { this.getOnlineUser()//数据接口调用 setInterval(() => {//隔30s轮询一次接口 this.getOnlineUser() }, 30000) this.myChart = echarts.init(document.getElementById('myChart')) } THE END. |