zoukankan      html  css  js  c++  java
  • 5月6日

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

    生成代码如下:

    复制代码
    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);
    });
    复制代码

    最终实现效果如下

  • 相关阅读:
    bzoj4598: [Sdoi2016]模式字符串
    bzoj3156: 防御准备
    bzoj1966: [Ahoi2005]VIRUS 病毒检测
    bzoj3170: [Tjoi2013]松鼠聚会
    bzoj3171: [Tjoi2013]循环格
    POJ1068Parencodings
    2013年山东省第四届ACM大学生程序设计竞赛 Alice and Bob
    POJ2632Crashing Robots
    POJ1328Radar Installation
    POJ2586Y2K Accounting Bug
  • 原文地址:https://www.cnblogs.com/ldy2396/p/14910094.html
Copyright © 2011-2022 走看看