三、可能适合你的做法
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 += "
" + params[i].name + "";
break;
}
}
for (var i = 0, key = {}; i < params.length; i++) {
key = params[i];
if (typeof key.value === ‘undefined‘ || key.value === ‘-‘){
key.value = ‘暂无‘;
}
content += "
+ key.color + " ‘> "
+ key.seriesName
+ " : " + key.value + "
";
}
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 += ‘
‘ + that.item[i].str ‘‘;
}
} else {
content += ‘
‘ + ‘Loading...‘ + ‘‘;
}
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.
原文：/Man-Dream-Necessary/p/7799104.html
