zoukankan      html  css  js  c++  java
  • 如何使地图和柱状图联动

    点击中国地图中的省,实现显示该省的对应的柱状图统计,请问这个联动效果如何实现呢?是否有熟悉的朋友能指教一下

    option = {
    tooltip: {
    trigger: 'item',
    formatter: '{b}'
    },
    series: [
    {
    name: '中国',
    type: 'map',
    mapType: 'china',
    selectedMode : 'multiple',
    label: {
    normal: {
    show: true
    },
    emphasis: {
    show: true
    }
    },
    }
    ]
    };
    // myChart是图表实例
    myChart.on('click', function (params) {
    // params是点击后获得区块信息
    var city = params.name;
    loadChart(city); // loadChart用来显示柱状图,包括setOption等等逻辑。
    });

    option代码来自于 echarts中国地图

    补充:

    option = {
    color: ['#3398DB'],
    tooltip : {
    trigger: 'axis',
    axisPointer : { // 坐标轴指示器,坐标轴触发有效
    type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis : [
    {
    type : 'category',
    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
    alignWithLabel: true
    }
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'直接访问',
    type:'bar',
    barWidth: '60%',
    data:[10, 52, 200, 334, 390, 330, 220]
    }
    ]
    };

    假设一下这个是省份的柱状图的option
    然后下面是loadChart函数

    var citys = ["浙江","上海"];
    var datas = ["浙江的数据","上海的数据"]
    loadChart = function(city) {
    // 通过city的值在citys内获取index,然后获取datas中对应数据
    // 传递过来的不一定是省份名称,也可以是其dataIndex,然后datas中数据顺序对应也可以。
    option.series[0].data = datas[0]; // 替换新的省份数据,当然具体这里的数据格式我并不清楚。
    bars.setOption(option, {"notMerge": true});
    //另外可能一开始不显示,然后第一次进行判断显示的逻辑我就不写了。
    }

    原文链接:https://segmentfault.com/q/1010000010809088?sort=created

  • 相关阅读:
    如何获取下拉框中的值
    如何建立主从服务器
    hibernate
    Python基础(一)
    python2 与 python3 区别
    canvas简述(二)游戏实战思路
    canvas简述(一)
    C简述(二)
    C语言的基本简述
    Js基础(三) WebAPI
  • 原文地址:https://www.cnblogs.com/snowhite/p/7793262.html
Copyright © 2011-2022 走看看