test2_js.js

雪月圣雕

(function (){
    //legend:图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
    //legend,会在统计图顶部显示不同颜色的按钮。
    var myChart = echarts.init(document.getElementById('main2'));
    var option = {
        title:{text:"年度风险数量对比直方图",left:"center"},
        legend: {
            top:"7%",
            data:['高风险','中风险','低风险']
        },
        toolbox: {
            show :true,
            feature: {
                dataView:{show:true},
                restore:{show:true},
                magicType:{type:['bar','line']},
                saveAsImage:{show:true}
            }
        },
        tooltip: {
        },
        xAxis:{
            type:'category',
            data: ['2019','2020','2021']    
        },
        yAxis:{
            type:'value'
        },
        dataset:{
            source:[
                ['year','高风险','中风险','低风险'],
                ['2019',320,120,220],
                ['2020',332,132,182],
                ['2021',301,101,191],
            ]
        },
        series: [
            {
                //name: '高风险',
                type: 'bar',
                // 根据stack的值来选取那些柱子堆叠在一起
                stack: '风险等级',
                color: 'red',
                emphasis: {
                    focus: 'series'
                },
                //data: [320, 332, 301],
                barWidth: '25%'
            },
            {
                //name: '中风险',
                type: 'bar',
                stack: '风险等级',
                color: 'orange',
                emphasis: {
                    focus: 'series'
                },
                //data: [120, 132, 101],
                barWidth: '25%'
            },
            {
                //name: '低风险',
                type: 'bar',
                stack: '风险等级',
                color: 'blue',
                emphasis: {
                    focus: 'series'
                },
                //data: [220, 182, 191],
                barWidth: '25%'
            }
        ]
    };
    //把配置项给实例对象
    myChart.setOption(option);
})();