三、可能适合你的做法

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 += "

‘;

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.

原文：http://www.cnblogs.com/Man-Dream-Necessary/p/7799104.html