zoukankan      html  css  js  c++  java
  • echarts省外地图根据颜色区分数据量

    newPro(){
                var data = [
                    {
                        name: '黑龙江',
                        value: 120057.34
                        },
                    {
                        name: '吉林',
                        value: 120057.34
                        },
                    {
                        name: '辽宁',
                        value: 120057.34
                        },
                    {
                        name: '内蒙古',
                        value: 120057.34
                        },
                    {
                        name: '北京',
                        value: 120057.34
                        },
                    {
                        name: '天津',
                        value: 120057.34
                        },
                    {
                        name: '山西',
                        value: 120057.34
                        },
                    {
                        name: '河北',
                        value: 120057.34
                        },
                    {
                        name: '山东',
                        value: 120057.34
                        },
                    {
                        name: '河南',
                        value: 120057.34
                        },
                    {
                        name: '安徽',
                        value: 15477.48
                        },
                    {
                        name: '湖北',
                        value: 131686.1
                        },
                    {
                        name: '深圳',
                        value: 6992.6
                        },
                    {
                        name: '江苏',
                        value: 44045.49
                        },
                    {
                        name: '浙江',
                        value: 70689.64
                        },
                    {
                        name: '云南',
                        value: 40689.64
                        },
                    {
                        name: '广西',
                        value: 9.64
                        },
                    {
                        name: '四川',
                        value: 689.64
                        },
                    {
                        name: '重庆',
                        value: 689.64
                        },
                    {
                        name: '贵州',
                        value: 409.64
                        },
                    {
                        name: '青海',
                        value: 4089.64
                        },
                    {
                        name: '福建',
                        value: 49.64
                        },
                    {
                        name: '湖南',
                        value: 4689.64
                        },
                    {
                        name: '甘肃',
                        value: 409.64
                        },
                    {
                        name: '广东',
                        value: 49.64
                        },
                    {
                        name: '江西',
                        value: 40689.64
                        },
                    {
                        name: '湖南',
                        value: 40689.64
                        },
                    ]
    
                var myChart = this.$echarts.init(this.$refs.proout);
                var myCharts = this.$echarts.init(this.$refs.showDate);
                
                var yMax = 0;
                for (var j = 0; j < data.length; j++) {
                    if (yMax < data[j].value) {
                        yMax = data[j].value;
                    }
                }
                    myChart.hideLoading();
                    myCharts.hideLoading();
                    var option = {
                        animation: true,
                        tooltip: {
                            show: true
                        },
                        visualMap: {
                            min: 0,
                            max: yMax,
                            text: ['高', '低'],
                            orient: 'horizontal',
                            itemWidth: 15,
                            itemHeight: 200,
                            right: 0,
                            bottom: 30,
                            inRange: {
                                color: ['#75ddff', '#0e94eb']
                            },
                            textStyle: {
                                color: 'white'
                            }
                        },
                        series: [
                            {
                                name: '数据名称',
                                type: 'map',
                                mapType: 'china',
                                selectedMode: 'multiple',
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{b}<br/>{c} (件)'
                                },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        borderColor: '#0e94eb',
                                        background: '#f00',
                                        label: {
                                            show: true
                                        }
                                    },
                                    emphasis: { // 也是选中样式
                                        borderWidth: 1,
                                        borderColor: '#fff',
                                        areaColor: 'rgb(179, 167, 104)',
                                        label: {
                                            show: true,
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    }
                                },
                                data: data,
                            }
                        ]
                    };
    
                    myChart.setOption(option);
                    myCharts.setOption(option);
            },
    <div class="proout_echars" ref="proout"></div>
    <div ref="showDate"></div>
    

      

  • 相关阅读:
    JavaScript数组方法
    模拟js数组indexOf方法
    js数组排序
    发布Exchange的SMTP,POP3服务器:ISA2006系列之十八
    用智能卡构建身份验证的马其诺防线:ISA2006系列之二十三
    Java与CSharp的相同与不同
    创建可传递的林信任,Active Directory系列之二十
    组策略指派Office2003分发,Active Directory系列之二十三
    发布Exchange的RPC以及RPC Over HTTPS:ISA2006系列之十九
    初步理解组策略,Active Directory系列之二十一
  • 原文地址:https://www.cnblogs.com/xhrr/p/12024344.html
Copyright © 2011-2022 走看看