echarts 是一款 js 组件库，能够绘制各种类型的图表数据，功能强大。官网文档 https://echarts.apache.org
上面总结下在 vue2 我的项目中的应用
1.npm 装置 echarts
npm install echarts --S
2. 引入 echarts 的全家桶，在 vue index.html 引入内部 js
// 从 node_modules 中 copy echarts.min.js 到定义的 static_front 目录下
<script src="/static_front/module/echarts/echarts.min.js"></script>3. 在 webpack.base.conf 中配置内部组件插件
// 在 externals 选项中配置
externals：{echarts：“echarts”}4. 在 main.js 中导入，并定义成全局属性
import * as echarts from 'echarts'
// 这两行特地留神：这是绘制中国热力求用，装置最新版 echarts5.3.0 后，并没有 map/json/china.json，我是从 v4.9.0 中复制来的
import china from '@static_front/module/echarts/china.json'
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts 5. 在组件 chart.vue 中绘制图表
// 定义接收图表的容器
<el-row class="div-graphic">
<div style="width:100%;height: 400px;" id="bar">
</div>
</el-row>// 定义 echarts 实例对象
this.barCharts = this.$echarts.init(document.getElementById("bar")) // 实例
this.barCharts.showLoading(this.chartsLoadingStyle) //loading 显示，定义款式
// 这里能够是 request 交互, 失去 option 须要的数据
this.barCharts.setOption(option)
this.barCharts.hideLoading() // 暗藏 loading
6. 上面看看各个图表的 option 配置
// 柱状图
barOption = {color: ['#3398DB'], // 系列调色板, 色彩列表
title: { // 图形题目
text: title,
textStyle:{fontSize:14},
left:25, // 组件离容器左侧的像素值
top:0,
},
tooltip: { // 提醒
trigger: 'axis', // 触发类型 item 数据项触发 axis 坐标轴触发
axisPointer : {// 指示器配置项
type : 'shadow' //line 直线指示器 shadow 暗影指示器
}
},
grid:{// 网格设置
//left: "9%", // 默认是 10%
},
toolbox:{ // 工具箱
show: true,
feature:{// 要显示的工具, 除了内置的工具外，还能够自定义
dataView: { // 数据视图
readOnly: true
},
magicType: {// 类型切换
type: ["line", "bar"]
},
restore: {}, // 还原
saveAsImage: {} // 保留为图片，默认 type=png}
},
xAxis: { // x 轴
type: 'category', //category 类目轴 value：数字轴 time:time 轴 log: 对数轴
boundaryGap: true, //true 标签和数据都会在刻度线两头，false: 标签和数据都在刻度线上
data: category, // 类目轴 数据
splitLine:{show:false // 坐标轴在 grid 区域中的分隔线。默认是显示的},
axisLabel:{ // 类目轴标签的斜度和格式化
formatter:function(value){
let rst = value
if(value.length >5){rst = value.substring(0,5) + "..."
}
return rst
}
},
},
yAxis: { // y 轴
type: 'value',
axisLine:{//value 坐标轴轴线设置
show: true,
},
axisTick:{ //value 坐标轴刻度设置
show:true
}
},
series: [{ // 系列
name : this.typeMapping[this.cond.event_type]+'量', // 系列名称，用于 tooltip, legend 时的显示
type : "bar",
barWidth: 30,
data : data
}]
}// 饼图
pieOption = {
title : {
text: title,
textStyle:{fontSize:14},
left:25, // 组件离容器左侧的像素值
top:0,
},
tooltip: {
trigger: 'item',
formatter: function (params,ticket,callback) {
var name = '';
for(var i = 0 ; i < params['name'].length;i++){name += params['name'][i];
if(i > 0 && i % 20 == 0){name += '<br />'}
}
return params['seriesName'] + '<br />' + name + ':' + params['value'] + '('+params['percent']+'%)'
},
},
legend: { // 图例
orient: 'vertical',
data: category,
left:'62%',
top:"10%",
formatter:function(value){
var rs = value;
if(value.length > 25){rs = value.substring(0,25) + '...'
}
return rs
}
},
series: [{ // 系列
name : this.typeMapping[this.cond.event_type] +'量', // 系列名称
type : "pie",
top: '5%',
radius : '50%', // 饼图的半径
center: ['35%', '50%'],// 中心点 距 x 轴，y 轴的间隔
data : data,
minAngle : 1, // 最小扇形的大小，避免值是 0 的扇形看不成成果
label : {// 图形上的标签文字
show : true,
formatter: function(param){var rs = param['name'];
if(rs.length > 15){rs = rs.substring(0,14) + '...'
}
return rs
},
},
}],
}// 热力求
mapOption = {color: ['#3398DB'],
title : {text: this.typeMapping[this.cond.event_type] + '数据地区散布',
textStyle:{fontSize:14},
left:25, // 组件离容器左侧的像素值
top:0,
},
tooltip : {trigger: 'item'},
grid: {
top: 0,
bottom: 0
},
visualMap: { // 视觉映射组件，相当于 echarts4 中的 dataRange, 次要是对地图视觉上的成果设置，比方色彩，定义图元自身的视觉和指标系列的视觉
type: 'continuous', //continuous: 连续型 'piecewise'：分段型
left:'15%',// 图元离直坐标系左侧间隔
top:'60%',
min: 0, // 图元最大最小值
max: max,
text:['高','低'],
calculable: true, // 是否显示拖曳用的手柄
realtime: false, // 拖曳过程中是否实时更新
inRange: { // 扭转图元的色彩和指标系列色彩 从 '#DDFDFE' 到 '#006EDD' 逐渐加深
color: ['#DDFDFE', '#006EDD'],
//symbolSize: [60, 200] // 是图元大小
}
//splitNumber:8 // 被分段的个数，在 type=piecewise 中无效，默认值是 5
},
series : [
{name: this.typeMapping[this.cond.event_type] + '数据地区散布',
type: 'map',
map: "china",
//roam: 'scale', // 开启鼠标缩放
selectedMode : 'multiple', // 选中模式，示意是否反对多个选中
label:{show:true}, // 地图上的 label 是否显示
data: data,
}
],
//animation: false // 是否开启动画
}