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

    最终实现效果如下

  • 相关阅读:
    jquery动态生成button的点击事件
    datatable 相关属性翻译
    python程序出现403错误
    相同布局的div层叠,冲突问题解决
    js进阶
    css进阶
    pycharm快捷键及常用设置
    arcgis软件安装相关问题
    将input type="file" 类型的图片文件转成base64
    SpringMVC中的参数绑定总结
  • 原文地址:https://www.cnblogs.com/ldy2396/p/14910094.html
Copyright © 2011-2022 走看看