软工试水日报-Echarts动态柱形图 3/14

昨天的博客我们探讨了怎么生成地图，但光是地图其实还不够直观，我们还需要一个柱形图或是折线图来标记人数最多的省份

生成代码如下：

var chartDomy = document.getElementById('fine');
var myCharts = echarts.init(chartDomy);
var options;

options = {
        title: {
               text: '各省/直辖市/自治区累计确诊人数',
               subtext: '数据来源：腾讯疫情追踪模块',
               sublink:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
            },
        tooltip: {
            trigger: 'axis'
        },
    xAxis: {
    type: 'category',
    data:data1
    },
    yAxis: {
        type: 'value'
        },
    series: [{
        data: datas,                //json数组
        type: 'bar'
    }],
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 0,      // 左边在40% 的位置。
                end: 10         // 右边在 100% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 0,      // 左边在40% 的位置。
                end: 10         // 右边在100% 的位置。
            }
        ]

};

options && myCharts.setOption(options);
myCharts.on('click', function (params) {                //点击事件       
    var str_p = params.name;
    console.log(params.name);
});

最终实现效果如下