vue 用echarts 写中国地图、饼状图、柱形图样式整理

偏执的太偏执、 2022-12-23 07:04 154阅读 0赞

## vue 用echarts 写中国地图、饼状图、柱形图样式整理 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center]  
代码实现：

mounted() {
          this.ChinaMap();
      },
      methods:{
      	ChinaMap(){
          console.log('地图数据加载')
           // 基于准备好的dom，初始化echarts实例
            var myChartContainer = document.getElementById('myChartChina');       
            var resizeMyChartContainer = function(){
              // myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
            } 
             resizeMyChartContainer();
            var myChartChina = this.$echarts.init(myChartContainer); 
            // 清空当前实例，移除实例中所有的组件和图表
            myChartChina.clear();
    
            function randomData() {  
                    return Math.round(Math.random()*500);  
                } 
            // 绘制图表
           var optionMap = {  
                  backgroundColor: '#fff',//地图背景色
                  tooltip: {},
                  dataRange: {
                      x: 'left',
                      y: 'bottom',
                      splitList: [
                          {start: 500, color: '#B80909',label:'死亡人数＞30人或直接经济损失＞1000万元'},
                          {start: 300, end:500, color: '#E64546',label:'死亡人数10~30人或直接经济损失500~1000万元'},
                          {start: 200, end:300, color: '#FF9985',label:'死亡人数3~10人或直接经济损失100~500万元'},
                          {start: 0, end: 200, color: '#FFFFFF',label:'死亡人数＜3人或直接经济损失＜100万元'}
                      ],
                      color: ['#B80909', '#E64546', '#FF9985','#FFFFFF']
                  },
                  legend: {
                      orient: 'vertical',
                      left: 'left',
                      data:['']
                  },   
                  selectedMode: 'single',
                  series : [                         
                            {
                              name: '', 
                              type: 'map',
                              mapType: 'china',
                              itemStyle: {
                                  normal:{
                                      borderColor: 'rgba(0, 0, 0, 0.2)'
                                  },
                                  emphasis:{
                                      shadowOffsetX: 0,
                                      shadowOffsetY: 0,
                                      shadowBlur: 20,
                                      borderWidth: 0,
                                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                                  }
                              },
                              //这是鼠标悬停的时候的数据
                              // 根据后端返回的数据自己修改
                              // tooltip : {
                              //   trigger: 'item',
                              //   formatter: function (params){
                              //   var name = params.name;                       
                              //         if(data!=null){
                              //             for(var i=0;i<data.length;i++){
                              //                 if(name.indexOf(data[i].name)!=-1){
                              //                         return(`${name}<br>
                              //                             站点数量：1111<br>
                              //                             正常站点：1111<br>
                              //                             告警站点：1111<br>`)
                              //                 }
                              //             }
                              //         }else{
                              //             return  name
                              //         } 
                              // }
                              // },
                              // 显示地图 上面的 地区原点
                              showLegendSymbol: false,
                              label: {
                                  normal: {
                                      show: false
                                  },
                                  // 不显示地区
                                  emphasis: {
                                      show: false
                                  }
                              },
                              data:[               
                                      {name: '北京',value: randomData() },
                                      {name: '天津',value: randomData() },
                                      {name: '上海',value: randomData() },
                                      {name: '重庆',value: randomData() },
                                      {name: '河北',value: randomData() },
                                      {name: '河南',value: randomData() },
                                      {name: '云南',value: randomData() },
                                      {name: '辽宁',value: randomData() },
                                      {name: '黑龙江',value: randomData() },
                                      {name: '湖南',value: randomData() },
                                      {name: '安徽',value: randomData() },
                                      {name: '山东',value: randomData() },
                                      {name: '新疆',value: randomData() },
                                      {name: '江苏',value: randomData() },
                                      {name: '浙江',value: randomData() },
                                      {name: '江西',value: randomData() },
                                      {name: '湖北',value: randomData() },
                                      {name: '广西',value: randomData() },
                                      {name: '甘肃',value: randomData() },
                                      {name: '山西',value: randomData() },
                                      {name: '内蒙古',value: randomData() },
                                      {name: '陕西',value: randomData() },
                                      {name: '吉林',value: randomData() },
                                      {name: '福建',value: randomData() },
                                      {name: '贵州',value: randomData() },
                                      {name: '广东',value: randomData() },
                                      {name: '青海',value: randomData() },
                                      {name: '西藏',value: randomData() },
                                      {name: '四川',value: randomData() },
                                      {name: '宁夏',value: randomData() },
                                      {name: '海南',value: randomData() },
                                      {name: '台湾',value: randomData() },
                                      {name: '香港',value: randomData() },
                                      {name: '澳门',value: randomData() }
                                ]
                            }
                        ]
                }
            myChartChina.setOption(optionMap);
            window.onresize=function(){
                resizeMyChartContainer();
                myChartChina.resize();
            }
        },
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center 1]  
代码实现：

在mounted直接调用方法

progressChart() {
          // 基于准备好的dom，初始化echarts实例
          let myChartProgress = this.$echarts.init(document.getElementById('myChartProgress'))
          myChartProgress.setOption ({
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              legend: {
                  data: [ '舆情查看率', '火灾次数']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'value',
                      splitLine:{show: false},//去除网格线
                      axisTick:{
                            show:false//不显示坐标轴刻度线
                      },
                      axisLine: {
                            show: false,//不显示坐标轴线
                      },
                      axisLabel: {
                            show: false,//不显示坐标轴上的文字
                      },
                  }
              ],
              color:['#2F80E7','#FF7A48'],
              yAxis: [
                  {
                      type: 'category',
                      splitLine:{show: false},//去除网格线
                      axisTick: {
                          show: false
                      },
                      axisLine: {
                            show: false,//不显示坐标轴线
                      },
                      axisLabel: {
                            show: true,//不显示坐标轴上的文字
                      },
                      data: ['北京', '天津', '河北', '山东', '陕西', '宁夏', '辽宁']
                  }
              ],
              series: [
                  {
                      name: '舆情查看率',
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true
                      },
                      barWidth : 20,//柱图宽度
                      data: [320, 302, 341, 374, 390, 450, 420]
                  },
                  {
                      name: '火灾次数',
                      type: 'bar',
                      stack: '总量',
                      barWidth : 20,//柱图宽度
                      label: {
                          show: true,
                          position: 'left'
                      },
                      data: [-120, -132, -101, -134, -190, -230, -210]
                  }
              ]
          });
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][20201123173657191.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/77a1efbe7a8a436d93b8291475303bec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ecc7313d0ec74c8fba29afa63c238665.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTExMzUz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/3121b1573ab24cdc92a33c58d528b897.png
[20201123173657191.png_pic_center]: /images/20221120/cf38ae41e7124d57bfa8ab27e5222218.png