echarts的使用
1、引入Echarts库文件
<script type="text/javascript"
src="../js/frame/echarts.common.min.js" ></script>
2、生成图表
option = {
title: {
text: "不同系统机电数量统计图",
x: 'center'
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 座标轴指示器,座标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
label: {
normal: {
show: true,//设置是否显示值
textStyle: {
color: '#d27d39',
fontSize: "18"
},
position: 'top'
}
},
grid: {
left: '3%',
right: '12%',
bottom: '3%',
containLabel: true
},
xAxis: [{
name: '系统名称',
type: 'category',
data: arr_xAxis,//统计项
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
// rotate:45,//倾斜角度
margin: 2,
textStyle: {//字体样式
color: "#222",
size: 14
},
formatter: function(val) {
return val.split("").join("\n");
}//设置为纵向字体
},
}],
yAxis: [{
name: '总数(个)',
type: 'value'
}],
series: [{
name: '总数',
type: 'bar',//图表类型
barWidth: '60%',
data: datas
}]
};
var myChart = echarts.init(document.getElementById('main'), "infographic");
myChart.setOption(option);
//绑定统计项的click事件
myChart.on('click',
function(params) {
showChildPopu(params.name);
// switch (params.dataIndex) {
// case 0: //柱子1
//
// break;
// case 1: //柱子2
// showChildPopu(params.name);
// break;
// case 2: //柱子3
// alert(3);
// break;
// default:
// alert(4);
// break;
// }
});
3、效果图