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