echarts的使用总结
echarts作为数据可视化插件的后期之秀,已经越来越多地被越来越多的公司或独立开发者使用,其底层依赖轻量级的Canvars类库ZRender,提供了直观生动、可定制的数据可视化图表。
echarts提供了多种图表呈现类型,我们这里主要看一下常用的三种图表类型:折线图、柱状图、饼图。
折线图、柱状图:
this.$echarts.dispose(document.getElementById('chart1')); // 内存释放 var chart1= this.$echarts.init(document.getElementById('chart1')); // 初始化图表
chart1.showLoading({
text: '数据加载中...'
});
var chart1Option = {
// 标题
title: {
text: '图表1',
x: 50
},
// 提示框
tooltip: {trigger: 'axis'},
// 图例信息
legend: {
data: ['图例'],
x: '55%'
},
// 工具箱
toolbox: {
show: true,
feature: {
mark: {show: true},
magicType: {show: true, type: ['line', 'bar']}, // 折线、柱状切换
restore: {show: true},
saveAsImage: {show: true}
},
},
// x轴坐标信息
xAxis: [{
type: 'category', // 坐标轴类型
// 坐标轴参数显示数据
data: ['目录1','目录2','目录3','目录4','目录5','目录6','目录7','目录8'],
axisLabel: { // 坐标轴参数显示间隔、旋转角度
interval: 0,
rotate: 30,
},
}],
// y轴坐标信息
yAxis: [
{
type: 'value', //坐标轴类型
name: 'x轴名称\n', //坐标轴名称
}
],
// 坐标体系占图表中的位置
grid: {
x: 150,
y2: 150,
},
// 生成图表的数据内容
series: [
{
name: '图例', // 与legend名称一致
type: 'bar', // 初始图表类型
markPoint: { // 标注
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
],
},
markLine: { // 标线
symbol: ['arrow', 'none'],
symbolSize: [4, 2],
data: [{type: 'average', name: '平均值'}]
},
data: [12, 14, 17, 13, 15, 10, 30, 28]
}
]
}
chart1.hideLoading(); // 关闭加载信息
chart1.setOption(chart1Option); // 画图
饼图:
this.$echarts.dispose(document.getElementById('chart2')); var chart2= this.$echarts.init(document.getElementById('chart2')); chart2.showLoading({ text: '数据加载中...' }); var chart2Option = { title : { text: '饼图', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'horizontal', x : 'left', data: ['分类1','分类2','分类3','分类4',] }, toolbox: { show : true, feature : { mark : {show: true}, magicType : { show: true, type: ['pie', 'funnel'], }, } }, series : [ { name:'分类', type:'pie', radius : '55%', center: ['50%', '65%'], data: [{name: '分类1', value: 15},{name: '分类1', value: 16},{name: '分类1', value: 17},{name: '分类1', value: 18}] } ] }; chart2.hideLoading(); chart2.setOption(chart2Option);
参考链接:
http://echarts.baidu.com/echarts2/doc/doc.html#Line