ECharts的使用与总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一,介绍与需求

1.1,介绍

ECharts商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现

1.2,需求

可视化展示数据

二,常规使用

以常规饼图为例

第一步：获取 ECharts

cnpm install echarts --save

第二步：按需引入 ECharts

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入饼图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

第三步：图表的容器

必须设置宽高（width，height）,否则没有效果

第四步：绘制图表

配置数据选项：

var option={
title:{},//图表的标题
tooltip:{},//应用的组件
legend:{},//图例组件包括颜色、朝向、位置等
xAxis:[{}],//直角坐标系中x轴需要配置的
yAxis:[{}],//直角坐标系中y轴需要配置的
series:[{}],//系列列表，包括列表类型、颜色、数据等
}

图表的绘制：

let chartDate= [{
value: 3661,
name: '三角函数的图象与性质'
}, {
value: 5713,
name: '空间向量及其运算'
},
{
value: 4563,
name: '直线与圆锥曲线的位置关系'
}, {
value: 9938,
name: '复数代数形式的四则运算'
}, {
value: 17623,
name: '集合'
}, {
value: 3299,
name: '公式的联系'
}]
var mainPieChart = eCharts.init(document.getElementById('main'));
// 绘制图表
mainPieChart .setOption({
backgroundColor: '#fff',
title: {
text: '三角函数',
x: 'center',
y: '38%',
textStyle: {
fontWeight: 'bold',
fontSize: 16
}
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
top: '74%',
// data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
data: [{
name: '三角函数的图象与性质',
// 强制设置图形为圆。
icon: 'circle',
},
{
name: '空间向量及其运算',
// 强制设置图形为圆。
icon: 'circle',
},
{
name: '直线与圆锥曲线的位置关系',
// 强制设置图形为圆。
icon: 'circle',
},
{
name:'复数代数形式的四则运算',
// 强制设置图形为圆。
icon: 'circle',
},
{
name: '集合',
// 强制设置图形为圆。
icon: 'circle',
},
{
name: '公式的联系',
// 强制设置图形为圆。
icon: 'circle',
}],
},
series: [{
type: 'pie',
selectedMode: 'single',
zlevel:1,
center:['50%', '40%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius: ['36%', '58%'],
color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
symbolOffset: [0, 120],
label: {
normal: {
position: 'outside',
formatter: '{d}%',
textStyle: {
color: '#999999',
fontWeight: 'bold',
fontSize: 14
}
},
emphasis: {
color: '#57B3FE',
}
},
labelLine: {
normal: {
show: false
}
},
data: chartDate
}]
});

选中第一个高亮

mainPieChart.dispatchAction({
type: 'highlight', //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
seriesIndex: 0, // 可选，系列 index，可以是一个数组指定多个系列
dataIndex: 0, // 可选，数据的 index
});

效果如下:

三,特殊使用

3.1,多类图切换保存

工具栏toolbox

toolbox: {//工具栏配置默认不显示
feature : {
dataView : {show: true, readOnly: false},//数据类型
magicType : {show: true, type: ['line', 'bar']},//图标类型切换
restore : {show: true},//还原
saveAsImage : {show: true}//保存图片
},
},

渐变色配置：

使用graphic.LinearGradient接口配置渐变色

color:new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFCFCF'
}, {
offset: 1,
color: '#F05353'
}]),

绘制图表完整配置：

main.setOption({
title: {
text: '个人总分较班级/年级',
left: 'center',
},
legend: {
top: 30,
right: 120,
bottom: 30,
data: ['我', '年级', '班级']
},
toolbox: { feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}, },
calculable: true,
tooltip: {
formatter: function (params) {
return params.name + "<br/>" + '分数: ' + params.value;
}
},
xAxis: [
{
type : 'category',
data: ['最高分', '最低分', '平均分']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '我',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color:
new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFCFCF'
}, {
offset: 1,
color: '#F05353'
}]),
}
},
data: [2.0, 4.9, 7.0],
},
{
name: '年级',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color:
new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1FE5BA'
}, {
offset: 1,
color: '#18D0CE'
}]),
}
},
data: [2.6, 5.9, 9.0], },
{
name: '班级',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color:
new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#909DD4'
}, {
offset: 1,
color: '#9E88D3'
}]),
}
},
data: [2.6, 5.9, 9.0],
}
]
});

效果：

3.2,进度图

graphic 是原生图形元素组件。

graphic: [{
type: 'text',
left: '42%',
top: '48%',
style: {
text: '4',
fill: '#08A0E2',
fontSize: 24
}
}, {
type: 'text',
left: '46%',
top: '48%',
style: {
text: ' /12',
fill: '#999',
fontSize: 24
}
}],

clockWise: true,//饼图的扇区是否是顺时针排布。默认是false

startAngle:270,//起始角度，支持范围[0, 360]。默认为0

绘制图表完整配置：

main.setOption({
backgroundColor: '#fff',
title: {
text: '主观题',
left: 'center',
textStyle: {
color: '#333333',
fontWeight: 'normal'
},
// subtextStyle: {
// color: '#57B3FE'
// }
},
graphic: [{
type: 'text',
left: '42%',
top: '48%',
style: {
text: '4',
fill: '#08A0E2',
fontSize: 24
}
}, {
type: 'text',
left: '46%',
top: '48%',
style: {
text: ' /12',
fill: '#999',
fontSize: 24
}
}],
series: [
{
name: "",
type: "pie",
clockWise: true,//饼图的扇区是否是顺时针排布。
startAngle:270,//起始角度，支持范围[0, 360]。
radius: [55, 65],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
}
},
hoverAnimation: false,
center: ['50%', '50%'],
label: {
normal: {
show: false,
position: "center"
}
},
data: [{
value: 4,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color:colorValue,
}
}
},
{
value: 8,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#E9EDF5"
}
}
}
]
}
]
})

效果：

3.3,交互柱状图

鼠标事件包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'。

组件交互的行为事件,主要通过 on 方法添加事件处理函数:

main.on('click', setOptionAction);//点击选中显示对应的name并高亮
main.on('mouseover',setOptionAction);//鼠标移入选中显示对应的name并高亮
function setOptionAction(params) {
main.setOption({
title: {
subtext: params.name,
},
series: [
{
itemStyle: {
normal: {
color: function (param){
return (params.value==chartData[param.dataIndex])?
'#57B3FE':
new eCharts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#909DD4' },
{ offset: 1, color: '#9E88D3' }
]
);
},
},
},
}
]
});
}

label字数太多时,显示点点，如下

axisLabel: {
formatter: function (value) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 6;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3,
{
var temp = "";//每次截取的字符串
var start = 0;//开始截取的位置
var end = maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "......";
ret += temp; //凭借最终的字符串
return ret;
}
else {
return value;
}
}
}

效果：

3.4,怀特图

echarts没有直接画怀特图的配置,实现思路：创建两个坐标轴,隐藏两个X轴,去掉Y轴线,保留一个刻度。

完整配置如下:

效果：

3.5,堆叠图

stack数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。

{
name: '「-3-2」',
type: 'bar',
barWidth: '30%',
stack: '总量',
color:'#9B65FF',
label: {
normal: {
show: true,
formatter: function (param) {
return param.value + '%';
},
position: 'top'
}
},
itemStyle: {
normal: {
barBorderRadius: [12, 0, 0,12]
},
},
data: [32, 30]
}