Echarts的小例子

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、效果图