echarts使用细节

1.横向柱状图

xAxis: {
   type : 'value',
          
},
yAxis: {
   type : 'category',
   data: ['敦刻尔克', '流浪地球', '后天'],
},

2.地图注入数据并附入散点涟漪

import chinaJson from  "@/utils/china.json"

let proData=  [
    {name:"北京市",value:177},
    {name:"天津市",value:42},
    {name:"河北省",value:102},
    {name:"山西省",value:81},
    {name:"内蒙古",value:47},
    {name:"辽宁",value:67},
    {name:"吉林",value:82},
    {name:"黑龙江",value:66},
    {name:"上海",value:24},
    {name:"江苏",value:92},
    {name:"浙江",value:114},
    {name:"安徽",value:109},
    {name:"福建",value:116},
    {name:"江西",value:91},
    {name:"山东",value:119},
    {name:"河南省",value:137},
    {name:"湖北省",value:116},
    {name:"湖南省",value:114},
    {name:"重庆",value:91},
    {name:"四川省",value:125},
    {name:"贵州",value:62},
    {name:"云南",value:83},
    {name:"西藏",value:9},
    {name:"陕西省",value:80},
    {name:"甘肃省",value:56},
    {name:"青海",value:10},
    {name:"宁夏",value:18},
    {name:"新疆",value:67},
    {name:"广东",value:123},
    {name:"广西",value:59},
    {name:"海南",value:14},
    ];

data(){
    return {
      option : {
        geo : {
          map : 'chinaMap',
        },
        series : [
          {
            type : 'map',
            roam : true,
            data : proData,
            map : 'chinaMap'
          },
          {
            type : "effectScatter",
            data : [
              {
                value : [113.280637,23.125178]
              },
              {
                value : [102.693453,30.674545]
              },
              {
                value : [115.5088,32.468761]
              },
            ],
            coordinateSystem : 'geo',
            rippleEffect : {
              scale : 5,
              color : 'yellow'
            }
          }
        ],
        visualMap : {
          min : 0,
          max : 500,
          inRange : {
            color : ['white','green']
          },
          calculable : true,
          geoIndex : 0
          
        }
      }
    }
  },

mounted() {
    const myEchart=echarts.init(this.$refs.home)
    echarts.registerMap("chinaMap",chinaJson)
    myEchart.setOption(this.option)
  },

3.vue3.0与echarts5.0的BUG

echarts实例赋值到vue data中，tooltip就会不显示,写成如下格式就没有问题

export default {
    data()  {
      this.echartsInstance = null // 建议这样存储echarts实例
      return {
        // echartsInstance: null // 放在data中会有tooltip不显示的问题（这样书写会有bug）
      }
    }  ,
    mounted() {
       const chartDom = document.getElementById('chartBox');
       this.echartsInstance = echarts.init(chartDom);
    }
}

原文:vue3.0 + echarts5.0 tooltip不显示问题 - 简书

4.图例文字与图标对齐

legend : {
                    itemWidth : this.commonFontSize/2,
                    itemHeight : this.commonFontSize/2,
                    formatter : [
                        '{a|{name}}',
                    ].join('\n'),
                    textStyle : {
                        fontSize : this.commonFontSize/2,
                        rich : {
                            a : {
                                verticalAlign : 'bottom',
                                lineHeight : this.commonFontSize/2,
                            }
                        }
                    },
                    
                }