ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
安装
cnpm 获取 echarts，cnpm install echarts --save
准备
// 为ECharts准备一个具备大小（宽高）的Dom
<div class="bar" ref="bar" style="width: 1000px;height: 500px></div>
</div>
// 基于准备好的dom，初始化echarts实例
let barChart = this.$echarts.init(this.$refs.bar);
在vue中使用setoption绘制图表，基础需要xy轴数据源，series配置
// 绘制图表
barChart.setOption({
xAxis:{//x轴数据源
type:'category',
data:xDataArr
// typr:'value'//横向
},
// 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type
// 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,
// 那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制
// 如果是横向的只需要把xxy交换参数
yAxis:{//y轴数据源
type:'value',//
// type:'category',//横向
// data:yDataArr,//横向
splitNumber:10, //分割段数
interval:'10', //强制设置坐标轴分割间隔
minInterval:20,//坐标轴最小间隔
maxInterval:5
},
series:[//配置
{
type:'bar',//图表类型
data:yDataArr,
markPoint:{//标记点
data:[
{type:'max',name:'最大值'},{type:'min',name:'最小值'}//最大值和最小值
// {type:‘average’} 平均值
// coord [x,y] 坐标位
// symbolOffset 标记偏移
// symbolSize 标记大小
// value 最定制标记内容
// symbol 标记图形包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ ,url
]
},
markLine:{//平均值,自动计算，改了数据源的数也会变
data:[{type:'average',name:'平均值'}]
},
label:{//数值显示
show:true,//是否可见
rotate:60,//旋转角度
position:'inside'//显示位置,如果是横向的要改成right
},
// barWidth:'30%',//主的宽度
},
{
name: '语文',
type: 'bar',
data: yDataArr,
itemStyle: {
// temStyle都会有normal和emphasis两个选项，normal选项是正常展示下的样式，emphasis是鼠标 hover 时候的高亮样式。
// 这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。
normal: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)',
color:'#000',
},
emphasis: {
color: '#fff'
}
},
},
{
name: '数学',
type: 'bar',
data: [93, 60, 61, 82, 95, 70, 71, 86],
color:'red',
}
],
legend:{//legend是图例，用于筛选类别，需要和series配合使用
//legend中的data是一个数组,legend 中的data的值需要和series数组中的某组数据的name值一致
data:['语文', '数学']
},
title:{//标题设置
text:'成绩展示', // 标题文字
textStyle:{// 标题文字样式设置
color:'red'
},
borderWidth:'1', // 标题边框宽度
borderColor:'blue', // 标题边框颜色
bordeRadius:1,// 标题边框圆角
left:50,// 标题距离左边的距离,标题本身类似position定位，需设置距离
top:10 // 标题距离顶部的距离
},
tooltip:{
trigger:'item',//触发类型可选值有item\axis,none 什么都不触发,,item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
triggerOn:'click',//触发时机可选值有 mouseOver\click
// formatter:'{b}:{c}'//格式化显示：分字符串和回调函数
formatter:function (val){
// console.log(val);
return val.name+':'+val.data
}//格式化显示：分字符串和回调函数
},
toolbox:{//工具栏，内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具
feature:{
aveAsImage: {}, // 将图表保存为图片
dataView: {}, // 是否显示出原始数据
restore: {}, // 还原图表
dataZoom: {}, // 数据缩放
magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
type: ['bar', 'line','stack']//line 折线图,bar 柱状图,stack 堆叠
}
}
},
grid:{//图表网格
show :true,//是否显示直角坐标系网格
left:'5%',//距离左侧距离
right:'5%',
top:'5%',
bottom:'5%',
backgroundColor:'#fff'
},
backgroundColor: '#2c343c'
})
