Apache ECharts 开箱使用
一、ECharts介绍
ECharts是百度开源的纯 Javascript 图表库，它是 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底层基于 ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
二、ECharts实例
版本 ECharts 3.0 v4.x
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main1'),'dark');
var option1 ={
backgroundColor: '#262D45',
//提示框组件
tooltip: {
trigger: 'axis', //坐标轴触发
axisPointer: { type: 'cross' }, //坐标轴指示器配置项(指示坐标轴当前刻度的工具)
backgroundColor:'rgba(0,0,0,0.8)', //提示框浮层的背景颜色
textStyle: { //提示框浮层的文本样式
fontSize:42,
lineHeight:64
}
},
grid: {
//grid组件离容器上下左右的距离(用百分比)
right: '4%',
left: '4%',
bottom: '20%',
top: '12%'
},
legend: { //图例组件
itemGap: 100, //图例之间每项间的间隔
itemWidth: 40, //图例标记的图形宽度，高度
itemHeight: 24,
padding:[20,0,0,0], //图例内边距，上右下左
textStyle: { //图例的公用文本样式
color: '#f1f1f1',
fontSize: 42,
fontWeight: 'normal' //问题字体的粗细
},
data:['Actual CT','UPH'] //图例的数据数组
},
xAxis : [
{
type: 'category', //坐标轴类型
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#f1f1f1',
width: 2
}
},
axisTick: { //坐标轴刻度相关设置
alignWithLabel: false, //为true时保证坐标轴和轴线对齐
length: 8, //坐标轴刻度的长度
lineStyle: { //坐标轴刻度线的相关设置
width: 2
}
},
axisLabel: { //坐标轴刻度标签的相关设置
fontSize: 32,
interval: 0, //设置成 0 强制显示所有标签
rotate: 20, //刻度标签旋转的角度
showMinLabel: true, //是否显示最小 tick 的 label
showMaxLabel: true
},
axisPointer: { //
show: true, //设置成true显示
label: {
show: true, //是否显示文本标签
color: '#fff',
fontSize: 42,
backgroundColor: '#000'
}
},
//X轴依次显示名字，值加单引号，值间逗号隔开
data : ['Install SubAssembly','P-TEST(SFC)','Pre-Burn',
'Install Camera','Install Rear Camera','Install Audio','MLB Install']
}
],
yAxis : [
.
.
.
],
series : [
.
.
.
]
};
//为echarts对象加载数据
myChart1.setOption(option1);
script>
三、ECharts操作
1. 给X轴添加点击事件（y轴同理）
第一步：将xAxis或者yAxis的属性triggerEvent 置为 true;
第二步：点击事件，如代码：
mybarDoubleChart.setOption(option);
mybarDoubleChart.on('click', function (params) {
if(params.componentType == "xAxis"){
alert("单击了"+params.value+"x轴标签");
}else
{
alert("单击了"+params.name+"柱状图");
}
});
2. 设置柱子的最大宽度和刻度的最小间隔
- 问题1：柱子的颜色要各种颜色，而不是同一种颜色；
- 问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
- 问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
- 问题4：如果窗口大小变化，图表可以自动进行调整。
var curChart = echarts.init(document.getElementById(showDivId));
// 初始化report对象
curChart.setOption({
title: {
subtext: '单位:个',
subtextStyle: {
"fontSize": 13,
"fontWeight": 'bolder',
"color": "#000000"
},
x: 'right',
y: 'top',
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 1],
min:0,
minInterval: 1
//解决问题3：实际上的统计信息，其数据都是整数，没有小数，设置最小刻度
},
yAxis: {
type: 'category',
data:[]
},
series: [
{
type: 'bar',
barMaxWidth: '50', //解决问题2：在柱子数量少的时候，剩下的
//柱子不要太粗，否则不好看，设置bar最大宽度
itemStyle: {
normal: {
color: function (params) {
//解决问题1：柱子的颜色要各种颜色，而不是同一种颜色
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25',
'#27727B', '#FE8463', '#9BCA63', '#FAD860',
'#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
'#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
}
}
},
data: []
}
]
});
//根据窗口大小调整图表
window.onresize = curChart.resize;
//解决问题4：如果窗口大小变化，图表可以自动进行调整