echarts实现中国地图-地图板块颜色修改


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ECharts地图选择器title>
head>

<body>
    
    <div id="main" style="height:400px">div>
    <script src="js/echarts.js">script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        // formatter: '{b}{c}',
                        formatter: function (params) {
                             // console.log(params);
                             if( params.data.value == undefined||params.data.value == '-'){
                                  params.data.value=0;
                             }
                             return params.data.name +'
'
+ params.data.value; }, }, series: [{ name: '中国', type: 'map', mapType: 'china', selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选 itemStyle: { normal: { label: { show: false,//默认是否显示省份名称 }, areaStyle: { color: '#f3f3f3',//默认的地图板块颜色 }, borderWidth:1, borderColor:'#e1e1e1', }, emphasis: { label: { show: true,//选中状态是否显示省份名称 }, areaStyle: { color: '#90c31d',//选中状态的地图板块颜色 }, }, }, //此为加载的数据 data: [ {name: '广东',selected: true,value:10}, {name: '广西',selected: true,value:10}, {name: '四川',selected: true,value:10}, ] }] }; // //var ecConfig = require('echarts/config'); //下面是一个选中事件 //myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) { // var selected = param.selected; //}); // 为echarts对象加载数据 myChart.setOption(option); } );
script> body> body> html>

echarts.js 下载链接echarts.js
最后展示样式
echarts实现中国地图-地图板块颜色修改_第1张图片

你可能感兴趣的:(加工)