• 如何使地图和柱状图联动


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

    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

  • 相关阅读:
    xsd的解释说明
    SDUT 2498-AOE网上的关键路径(spfa+字典序路径)
    java实现各种数据统计图(柱形图,饼图,折线图)
    软件測试计划模板
    范式图形辨析
    Android做法说明(3)---Fragment使用app袋或v4包解析
    登录同步多个副本如何实现的拷贝数发生变化分布式
    ZOJ1463:Brackets Sequence(间隙DP)
    jquery php 百度搜索框智能提示效果
    Hibernate在关于一对多,多对一双向关联映射
  • 原文地址:https://www.cnblogs.com/snowhite/p/7793262.html
Copyright © 2020-2023  润新知