Echarts常用组件常用简单使用汇总
最近由于项目需求 要学习一段echarts 数据可视化 ，不得不说echarts的各种组件还是非常强大的，不过面临头疼的也是 他强大的API 实在太多的属性 所以在这汇总下个人在使用中常用的配置
这里附上百度Ecahrts 官方api 感兴趣学习的小伙伴可以去研究下：
https://echarts.baidu.com/option.html#title
1.折线图常用命令：
//根据第获取元素
var dom = document.getElementById("bottom_02");
//加载echarts组件
var myChart = echarts.init(dom);
var app = {};
//折线图数据源
var data_line={
//x轴显示数据
xAxis:['2013','2014','2015','2016','2017','2018'],
//y轴单位值
yAxis:'(万吨)',
seriesData:[100, 200, 320,300,250,190]
};
option = null;
option = {
//grid属性用于设置图标在div中的位置
grid: {
//距离上边框的距离（以下依次）
top:'18%',
left: '2%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
//'type':x轴显示数值类型 通常为category
type: 'category',
boundaryGap: false,
data: data_line.xAxis,
//设置坐标轴的轴线
axisTick: {
show: false
},
//设置坐标轴刻度属性
axisLine: {
show: true,
//设置刻度的样式
lineStyle:{
color:'#FFFFFF'
}
},
},
yAxis: {
//跟xAxis相呼应 一个显示类目，一个显示数值
type: 'value',
boundaryGap: false,
name:data_line.yAxis,
data:data_line.seriesData,
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle:{
color:'#FFFFFF'
}
},
},
//加载显示数据
series: [{
data: data_line.seriesData,
type: 'line',
// 显示数值
itemStyle : {
normal: {
label : {
width: 1,
color:'#FFB508',
show: true
}
}
},
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
2.柱状图常用命令：
var dom = document.getElementById("right_top");
var myChart = echarts.init(dom);
var app = {};
option = null;
//右侧柱状图数据集合
var data_apar_right={
//标题内容
titleData:'仓容情况',
//分类标题头
legend:['总的', '已用'],
//x轴内容
xAxis:['库1', '库2', '库3', '库4', '库5','库6'],
//'legend(总的)'对应各个库的数据
data_legend1:[320, 332, 301, 334, 390,400],
//'legend(已用)'对应各个库的数据
data_legend2:[220, 182, 191, 234, 290,400]
};
option = {
color: ['rgba(151,4,253,1)','rgba(3,177,211,1)', 'rgba(230,154,18,1)','rgba(12,186,137,1])'],
//tooltip鼠标移入显示弹框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
//类目显示 对应图中最上面两个
legend: {
data:data_apar_right.legend
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data:data_apar_right.xAxis,
axisLabel: {
interval:0,
//样式全部写在textStyle里
textStyle: {
color:'rgba(255,255,255,0.4)',
fontStyle:'normal',
fontSize:9,
opacity:0.4
}
},
}
],
yAxis: [
{
type: 'value',
axisLabel: {
interval:0,
textStyle: {
color:'rgba(255,255,255,0.4)',
fontStyle:'normal',
fontSize:9,
opacity:0.4
}
},
}
],
series: [
{
name: data_apar_right.legend[0],
type: 'bar',
//设置柱状图宽度
barWidth : 12,
//设置柱状图间距
barGap: 0,
data: data_apar_right.data_legend1,
itemStyle: {
normal: {
//color设置颜色渐变 以后自己用可以直接拿来颜色替换掉即可
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#9704FD'},
{offset: 1, color: '#03B1D3'}
]
)
},
//鼠标移入时样式变化
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#03B1D3'},
{offset: 1, color: '#9704FD'}
]
)
}
},
},
{
name: data_apar_right.legend[1],
type: 'bar',
barWidth : 12,
data: data_apar_right.data_legend2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#E69A12'},
{offset: 1, color: '#0CBA89'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0CBA89'},
{offset: 1, color: '#E69A12'}
]
)
}
}
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
3.饼状图（圆环图）常用命令：
由于饼状图使用很简单官方api也说明的很详细 所以就不介绍了 ，直接介绍饼状图另一种样式-圆环图
var dom = document.getElementById("bottom_03");
var myChart = echarts.init(dom);
var app = {};
option = null;
//数据源
var data_circle={
//标题
title:'异常事故比例',
//数据源
dataset:[{name:'火警',num:12},{name:'违规操作',num:2},{name:'设备损毁',num:19},{name:'盗窃',num:3},{name:'摔倒',num:30}],
//备注框显示的内容
legend:['火警','违规操作','设备损毁','盗窃','摔倒']
};
option = {
title: {
text: data_circle.title,
left:'18%',
top: '78%',
textStyle: {
color: '#fff',
fontSize: 14
}
},
grid: {
left: '5%', //图表距边框的距离（对所有图表均适用）
right: '5%',
top:'18%',
bottom: '5%',
containLabel: true
},
color:['#00BD8D','#D90051','#01B4D2','#FFB508','#9702FE'],
//显示移入弹框
tooltip: {
trigger: 'item',
formatter: "{b}
{d}次"//自定义显示数据
//a:系列名称,b:数据项名称,c:数值,d:百分比
},
legend: {
orient: 'vertical',
data:data_circle.legend,
//设置导航栏宽度对应图中右边那一列
itemWidth:10,
//设置导航栏每一项的间距
itemGap:25,
top:'28%',
right:'19%',
//设置导航栏高度
itemHeight:10,
textStyle:{
color:'#fff',
fontSize:14
}
},
dataset: {
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
source: data_circle.dataset
},
series: [
{
type:'pie',
//设置这个就会将饼状图变成圆环图。radius中两个参数指的是内径和外径 *切记* 内径<外径 （不然移入效果会出错）
//是否显示拐点
// showSymbol:false,
//拐点大小
symbolSize:4,
radius: ['30%', '50%'],
//设置圆心位置 （对应则是圆环或饼图移动位置）
center: ['29%', '40%'],
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}