手把手·教你用 Echarts 画 ChinaMap

手把手·教你用 ECharts 画 ChinaMap

tip: 学习此教程你需要使用 Echarts 指定版本和 China.js

我使用的版本是下面的

  • ECharts4.3.0
  • China.js

题目要求

地图上显示“省份”,并按照省份统计时长、用不同颜色分档显示;当鼠标移至某个景区,该省份背景图变色(表示被选中),同时显示该省份所有机器的运营时长、有效订单金额等;(说白了就差不多和疫情官网那个图效果差不多)

具体实现的效果如下

手把手·教你用 Echarts 画 ChinaMap_第1张图片

实现步骤

  • 根据data画出基础地图
  • 显示省份名称
  • 按运营时长进行分色,运营时长越长的颜色越重,反之相反(这里需要注意,它默认会按 data 中的 value 进行分色,所以我会把运营时长转换为 value)
  • 鼠标悬停选中样式,点击选中,弹出提示框。点击空白区域取消选中,提示框消失
根据data画出基础地图

myChart.setOption(optionMap);

DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2572350_vt8vhw864w.css">
  <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js">script>
  <script src="./china.js">script>
  <title>Echarts Testtitle>
head>

<body>
  <div id="myEchartsContent" style="width: 100%;height:600px;background-color: orangered;">div>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('myEchartsContent'));

    function randomData() {
       
      return Math.round(Math.random() * 500);
    }
    
    // 模拟假数据
    var mydata = [{
       
        name: '北京',
        operateTime: randomData(), // 运营时间
        orderAmount: randomData() // 订单金额
      }, {
       
        name: '天津',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '上海',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '重庆',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '河北',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '河南',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '云南',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '辽宁',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '黑龙江',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '湖南',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '安徽',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '山东',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '新疆',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '江苏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '浙江',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '江西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '湖北',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '广西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '甘肃',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '山西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '内蒙古',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '陕西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '吉林',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '福建',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '贵州',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '广东',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '青海',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '西藏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '四川',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '宁夏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '海南',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '台湾',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '香港',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '澳门',
        operateTime: randomData(),
        orderAmount: randomData()
      }
    ];

    var optionMap = {
       
      backgroundColor: '#FFFFFF',
      title: {
       
        text: '机器人运营大数据',
        subtext: '',
        x: 'center'
      },
      tooltip: {
       
        trigger: 'item',
      },
      //配置属性
      series: [{
       
        name: '数据',
        type: 'map',
        mapType: 'china',
        symbolSize: 14,
        roam: true,
        label: {
       
          emphasis: {
       
            show: false
          }
        },
        data: myData //数据
      }]
    };
    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);

    // 图表自适应
    window.addEventListener('resize', function () {
       
      myChart.resize()
    })
  script>
body>
html>

这步很简单,引入echarts和china.js,初始化echarts实例,给data一个数据列表,使用配置好的option进行图表绘制即可

显示省份名称

show: true //省份名称

//配置属性
series: [{
     
    name: '数据',
    type: 'map',
    mapType: 'china',
    symbolSize: 14,
    roam: true,
    selectedMode: "single", // 选中效果固化,字符串取值可选'single','multiple','single'单选,'multiple'多选
    label: {
     
        normal: {
     
            // formatter: '{b}',
            show: true //省份名称  
        },
        emphasis: {
     
            show: false
        }
    },
    data: myData //数据
}]
按运营时长进行分色

主要就是根据data中的value值进行分色,值越大颜色越深

// 处理假数据(根据哪个字段分颜色,哪个字段就改成value)
var newMyData = mydata.map((item) => {
     
    // console.log(item);
    return {
     
        name: item.name,
        value: item.operateTime,
        orderAmount: item.orderAmount
    }
})
// console.log(newMyData);

...

//左侧小导航图标
visualMap: {
     
    show: true,
    x: 'left',
    y: 'center',
    splitList: [{
     
           start: 200,
           end: 300
        }, {
     
           start: 100,
           end: 200
        }, {
     
           start: 0,
           end: 100
        },
    ],
    color: ['#FF9985', '#FFE5DB', '#FFFFFF'],
},

//配置属性
series: [{
     
    ...
    data: newMyData //数据
}]

这一步处理假数据,把运营时间转换为 value ,在 visualMap 组件里进行颜色分色,重新在series中修改data的新值即可

鼠标悬停选中样式

tooltip

var areaColor = '#C7FFFD' // 选中后的地图颜色
var position = [10, 10] // tooltip初始显示位置
var isClickMap = false // 是否点击了地图

tooltip: {
     
    trigger: 'item',
        enterable: true, // 是否可以移到提示框上
            // tooltip的初始位置
            // position,
            // alwaysShowContent: true, // 是否一直显示tooltip
            hideDelay: 100, // tooltip隐藏的延迟(alwaysShowContent: true 时无效)
            triggerOn: "click", // 点击地图后显示tooltip

            // 鼠标悬停在地图上时的省机器人信息
            formatter: function (params) {
      //自行定义formatter格式
                // console.log("formatter params:", params);
                if (!!params.data) {
     
                   return `
                    
${ params.name} 详情
运营时长: ${ params.data.value}小时 订单金额: ${ params.data.orderAmount}
`
} else { return } }, }, // 点击全局Echarts触发 myChart.getZr().on('click', function () { // 如果isClickMap为true才执行(当你点击了地图后才能触发以下逻辑) if (isClickMap) { isClickMap = false myChart.setOption(optionMap) // 因为Echarts是用canvas绘制出来的,所以在这里进行重绘时就可以实现点击空白(非地图)区域取消选中 } }) // 地图点击事件 myChart.on("click", function (params) { isClickMap = true // tooltip 详情点击事件 var btnXQEve = document.getElementById("btn_xiangqing") // console.log(btnXQEve); btnXQEve.addEventListener("click", function () { console.log("点击详情打开机器人运营统计页面"); }) })

此步骤最为重要也更难实现,挺难找的感觉,但是实现过后又感觉没啥东西

总结

完整代码在这里

DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2572350_vt8vhw864w.css">
  <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js">script>
  <script src="./china.js">script>
  <title>Echarts Testtitle>
  <style>
    .province_robot_info {
       
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .pri_head {
       
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .icon-xiangqing {
       
      font-size: 12px;
      margin-left: 3px;
    }
  style>
head>

<body>
  <div id="myEchartsContent" style="width: 100%;height:600px;background-color: orangered;">div>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('myEchartsContent'));

    function randomData() {
       
      return Math.round(Math.random() * 500);
    }

    var areaColor = '#C7FFFD' // 选中后的地图颜色
    var position = [10, 10] // tooltip初始显示位置
    var isClickMap = false // 是否点击了地图
    // 模拟假数据
    var mydata = [{
       
        name: '北京',
        operateTime: randomData(), // 运营时间
        orderAmount: randomData() // 订单金额
      }, {
       
        name: '天津',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '上海',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '重庆',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '河北',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '河南',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '云南',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '辽宁',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '黑龙江',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '湖南',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '安徽',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '山东',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '新疆',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '江苏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '浙江',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '江西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '湖北',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '广西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '甘肃',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '山西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '内蒙古',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '陕西',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '吉林',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '福建',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '贵州',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '广东',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '青海',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '西藏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '四川',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '宁夏',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '海南',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '台湾',
        operateTime: randomData(),
        orderAmount: randomData()
      },
      {
       
        name: '香港',
        operateTime: randomData(),
        orderAmount: randomData()
      }, {
       
        name: '澳门',
        operateTime: randomData(),
        orderAmount: randomData()
      }
    ];

    // 处理假数据(根据哪个字段分颜色,哪个字段就改成value)
    var newMyData = mydata.map((item) => {
       
      // console.log(item);
      return {
       
        name: item.name,
        value: item.operateTime,
        orderAmount: item.orderAmount
      }
    })
    // console.log(newMyData);

    var optionMap = {
       
      backgroundColor: '#FFFFFF',
      title: {
       
        text: '机器人运营大数据',
        subtext: '',
        x: 'center'
      },
      tooltip: {
       
        trigger: 'item',
        enterable: true, // 是否可以移到提示框上
        // tooltip的初始位置
        // position,
        // alwaysShowContent: true, // 是否一直显示tooltip
        hideDelay: 100, // tooltip隐藏的延迟(alwaysShowContent: true 时无效)
        triggerOn: "click", // 点击地图后显示tooltip

        // 鼠标悬停在地图上时的省机器人信息
        formatter: function (params) {
        //自行定义formatter格式
          // console.log("formatter params:", params);
          if (!!params.data) {
       
            return `
            
${ params.name} 详情
运营时长: ${ params.data.value}小时 订单金额: ${ params.data.orderAmount}
`
} else { return } }, // show: true, //不显示提示标签 // formatter: '{b}', //提示标签格式 // backgroundColor: "#ff7f50", //提示标签背景颜色 // textStyle: { // color: "#fff" // } //提示标签字体颜色 }, //左侧小导航图标 visualMap: { show: true, x: 'left', y: 'center', splitList: [{ start: 200, end: 300 }, { start: 100, end: 200 }, { start: 0, end: 100 }, ], color: ['#FF9985', '#FFE5DB', '#FFFFFF'], }, // 写上了没效果,所以注释 // geo: { // map: 'some_svg' // }, //配置属性 series: [{ name: '数据', type: 'map', mapType: 'china', symbolSize: 14, roam: true, selectedMode: "single", // 选中效果固化,字符串取值可选'single','multiple','single'单选,'multiple'多选 label: { normal: { // formatter: '{b}', show: true //省份名称 }, emphasis: { show: false } }, itemStyle: { emphasis: { // 鼠标悬停选中样式 borderWidth: 0, // borderColor: '#fff', areaColor, // 选中后的地图颜色 label: { show: true, textStyle: { // color: '#fff' } } } }, data: newMyData //数据 }] }; //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); // 初始tooltip显示 // myChart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: 0, // }) // 点击全局Echarts触发 myChart.getZr().on('click', function () { // 如果isClickMap为true才执行(当你点击了地图后才能触发以下逻辑) if (isClickMap) { isClickMap = false myChart.setOption(optionMap) // 因为Echarts是用canvas绘制出来的,所以在这里进行重绘时就可以实现点击空白(非地图)区域取消选中 } }) // 地图点击事件 myChart.on("click", function (params) { isClickMap = true // tooltip 详情点击事件 var btnXQEve = document.getElementById("btn_xiangqing") // console.log(btnXQEve); btnXQEve.addEventListener("click", function () { console.log("点击详情打开机器人运营统计页面"); }) }) // 图表自适应 window.addEventListener('resize', function () { myChart.resize() })
script> body> html>

这么多你都看下来了,给个三连再走呗~

你可能感兴趣的:(前端,数据可视化,echarts)