echarts3写法

最新推荐文章于 2024-05-11 11:31:38 发布

小鱼儿_zhang

最新推荐文章于 2024-05-11 11:31:38 发布

阅读量5.8k

点赞数

分类专栏：工作问题

本文链接：https://blog.csdn.net/qq_20261343/article/details/51098420

版权

工作问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:800px"></div>

    <!-- ECharts单文件引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>    
    <script src="js/data.js" type="text/javascript" charset="utf-8"></script>
</html>

//数据：
data.js
var data =[
{"id":1,"city":"郑州市","positive":0,"negative":13,"ratingScore":0.9784},
{"id":2,"city":"焦作市","positive":10,"negative":10,"ratingScore":0.9788},
{"id":3,"city":"开封市","positive":20,"negative":20,"ratingScore":0.8777},
{"id":4,"city":"新乡市","positive":30,"negative":30,"ratingScore":0.6766},
{"id":5,"city":"周口市","positive":40,"negative":40,"ratingScore":0.6966},
{"id":6,"city":"平顶山市","positive":50,"negative":50,"ratingScore":0.6844},
{"id":7,"city":"南阳市","positive":60,"negative":60,"ratingScore":0.6266},
{"id":8,"city":"三门峡市","positive":70,"negative":70,"ratingScore":0.7733},
{"id":9,"city":"漯河市","positive":80,"negative":80,"ratingScore":0.0622},
{"id":10,"city":"商丘市","positive":90,"negative":90,"ratingScore":0.4611},
]

//评级覆盖数据
var obj=[]
for (var i=0;i<data.length;i++) {   
    //评分数据
    var name = data[i].city
    obj.push({name,value:data[i].ratingScore})

    //缓存
    $("#mapdata").data(name,data[i])
}
    console.log($("#mapdata").data("焦作市"))

//js
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = {

    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            }
        }
    },
    legend: {
        x: 'right',
        data: ['债券评级']
    },
    dataRange: {
        orient: 'horizontal',
        x: 'right',
        min: 0,
        max: 1,
        color: ['orange', 'yellow'],
        text: ['高', '低'], // 文本，默认为数值文本
        splitNumber: 0
    },

    series: [{
        name: '债券评级',
        type: 'map',
        mapType: 'china',
        selectedMode: 'single',
        mapLocation: {
            x: 'left',
            y: 'top',
            width: '30%'
        },
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: [{
            name: '北京',
            selected: false
        }, {
            name: '天津',
            selected: false
        }, {
            name: '上海',
            selected: false
        }, {
            name: '重庆',
            selected: false
        }, {
            name: '河北',
            selected: false
        }, {
            name: '河南',
            selected: false
        }, {
            name: '云南',
            selected: false
        }, {
            name: '辽宁',
            selected: false
        }, {
            name: '黑龙江',
            selected: false
        }, {
            name: '湖南',
            selected: false
        }, {
            name: '安徽',
            selected: false
        }, {
            name: '山东',
            selected: false
        }, {
            name: '新疆',
            selected: false
        }, {
            name: '江苏',
            selected: false
        }, {
            name: '浙江',
            selected: false
        }, {
            name: '江西',
            selected: false
        }, {
            name: '湖北',
            selected: false
        }, {
            name: '广西',
            selected: false
        }, {
            name: '甘肃',
            selected: false
        }, {
            name: '山西',
            selected: false
        }, {
            name: '内蒙古',
            selected: false
        }, {
            name: '陕西',
            selected: false
        }, {
            name: '吉林',
            selected: false
        }, {
            name: '福建',
            selected: false
        }, {
            name: '贵州',
            selected: false
        }, {
            name: '广东',
            selected: false
        }, {
            name: '青海',
            selected: false
        }, {
            name: '西藏',
            selected: false
        }, {
            name: '四川',
            selected: false
        }, {
            name: '宁夏',
            selected: false
        }, {
            name: '海南',
            selected: false
        }, {
            name: '台湾',
            selected: false
        }, {
            name: '香港',
            selected: false
        }, {
            name: '澳门',
            selected: false
        }]
    }]
};

// 为echarts对象加载数据 
myChart.setOption(option);

//地图选择某个省时，则触发事件
myChart.on("mapSelected", function(param) {
    //
    var selected = param.selected;
    //选择的省
    var selectedProvince;
    var name;
    for (var i = 0, l = option.series[0].data.length; i < l; i++) {
        //获取series[0]下的每name的名称
        name = option.series[0].data[i].name;

        //更改series[0] 中的数据 为选中的状态
        option.series[0].data[i].selected = selected[name];
        //获取选择的省
        if (selected[name]) {
            selectedProvince = name;
        }
    }
    if (typeof selectedProvince == 'undefined') {
        option.series.splice(1);
        option.legend = null;
        option.dataRange = null;
        myChart.setOption(option, true);
        return;
    }

    //在series中添加对象
    option.series[1] = {
        selectedMode: "single",
        tooltip: {
            trigger: 'item',

            formatter: function(params, ticket, callback) {
                //获取series[1]的obj
                var temp1 = params[5]
                var name = temp1.name
                console.log(name)

                //鼠标当前指示的城市
                var objvalue = $("#mapdata").data(name)
                if (objvalue) {
                    return objvalue.city + "<br/>" + objvalue.positive + "<br/>" + objvalue.negative + "<br/>" + objvalue.ratingScore
                }
                return "今日无数据"

            }
        },
        //鼠标是否可进入详情气泡中
        enterable: true,
        name: '评级',
        type: 'map',
        //地国类型 为选择的省
        mapType: selectedProvince,
        itemStyle: {
            normal: {
                label: {
                    show: true
                }
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        //显示地图的位位
        mapLocation: {
            x: '35%'
        },
        //拖拽漫游开通
        roam: true,

        data: obj
    };

    myChart.setOption(option, true);
});

小鱼儿_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts3写法

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body>  <div id="main" style="height:800px"></div>
复制链接

扫一扫