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 目录下
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中绘制图表
// 定义接纳图表的容器
// 定义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 += '
'
}
}
return params['seriesName'] + '
' + 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 //是否开启动画
}