1、说明
1、echarts可以由直接引用（如下），也可通过webpack引用和打包（这里不做介绍）
2、异步加载数据：使用回调或loading动画
2、HTML页面引入
基本图表引入echarts.min.js就可以，特殊图表，比如中国地图需要引入如图1第二个
图1
3、使用和加载（如图2）
echarts全局对象通过init创建实例返回echartsInstance( 即图2 myChart )；
setOption 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成；
一个容器不能初始化多个实例；
图2
4、配置数组和配置项（如图3）：
option中最重要的配置项是series；
series中data 数据项中用name表示数据项名称， value表示单个数据项的数值；
data数组示例：[1,2,5,...] ,["例子1","例子2",...]
[ {value:100,name:"例子1"}，{value:120,name:"例子2"},...]
换行：\n
echarts3.7以后版本开始支持富文本标签rich，允许对文字标签进行样式设置
下面整理了一下使用频率较高的配置（折线和饼图），具体配置看需求
图3
5、饼图demo
饼图基本图
var data = [{name:"三甲",value:4},{name:"三乙",value:2},{name:"二乙",value:1}];
var optionPinLeft = {
title: {
text:'医院级别',
subtext:'',
textStyle:{fontSize:12},
x:'10%'
},
tooltip: {
trigger:'item',
formatter:"{a} {b} : {c} ({d}%)"
},
color: ['#6a8bc0','#e55b57','#49586e','#34b7f1','#58cb91'],
series: [{
name:'站点级别',
type:'pie',
radius:'60%',
center: ['50%','60%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0, 0, 0, 0.5)'
}
}
}]
};
6、折线图demo
折线图
折线图代码如下：
option = {
backgroundColor: '#394056',
title: {
text: '请求数',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {color: '#57617B' }
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: { color: '#57617B' }
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '单位（%）',
axisTick: {show: false },
axisLine: {
lineStyle: { color: '#57617B'}
},
axisLabel: {
margin: 10,
textStyle: {fontSize: 14 }
},
splitLine: { lineStyle: { color: '#57617B' } }
}],
series: [{
name: '移动',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {width: 1}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ offset: 0, color: 'rgba(137, 189, 27, 0.3)' }, {offset: 0.8, color: 'rgba(137, 189, 27, 0)' } ], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: '电信',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0, 136, 212, 0.3)'}, {offset: 0.8,color:'rgba(0,136, 212, 0)'}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}]
};
网友评论