Apache ECharts
一个基于 JavaScript 的开源可视化图表库
echarts可以帮助我们轻松的将数据用各种图形作展示，助力数据的可读性。
安装echarts项目依赖
npm install echarts --save
//或者
npm install echarts -S
下载过慢建议使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
项目中全局引入
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
准备一个div容器
<div id="main" style="width: 600px;height:400px;"></div>
配置项
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
const data = axisData.map(function (item, i) {
return Math.round(Math.random() * 1000 * (i + 1));
});
const links = data.map(function (item, i) {
return {
source: i,
target: i + 1
};
});
drawChart() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
option = {
title: {
text: 'Graph on Cartesian'
},
tooltip: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: axisData
},
yAxis: {
type: 'value'
},
series: [
{
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 40,
label: {
show: true
},
` edgeSymbol: ['circle', 'arrow'],`
` edgeSymbolSize: [4, 10],`
` data: data,`
` links: links,`
` lineStyle: {`
` color: '#2f4554'`
` }`
}
]
};
// 使用刚指定的配置项和数据显示图表.
` myChart.setOption(option);`
}
},
配置完成
附：配置项（2）
ooltip提示框组件：
1.trigger触发类型（item数据项图像触发，axis坐标轴触发，none不触发）
2.showDelay浮层显示的延迟，单位ms。
3.提示框浮层的样式（fontWeight，fontFamily，textBorderColor
