一、echarts3.0(官网: http://echarts.baidu.com/)
首先通过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、引入
到官网下载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、便于数据变更的处理方法是：
首先在 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.
