Echarts的小例子

最新推荐文章于 2024-09-23 18:34:38 发布

原创最新推荐文章于 2024-09-23 18:34:38 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts3-0 #click事件

echarts3-0 专栏收录该内容

1 篇文章

订阅专栏

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;
    //      }
});