Echarts气泡图纵横轴为中文，交叉展示实现方式以及气泡展示数量

效果图如下

如示例图所展示的效果是每个文件类型所对应的热词被搜索了多少次；

实现方式

1. 需要用到echarts气泡图的配置
   <div ref="chart" class="charts-box" />

var option={
	legend: {
          // right: '10%',
          // top: '3%',
          data: []
        },
        grid: {
          left: '8%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          splitLine: {
            interval: 0,
            lineStyle: {
              type: 'dashed'
            }
          },
          interval: 0,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#DCDFE6',
              //这里是为了突出显示加上的
              //横轴信息全部显示
            }
          },
          axisLabel: {
            fontWeight: 400,
            fontFamily: 'Microsoft YaHei',
            fontSize: 18,
            color: '#303133',
            showMinLabel: true,
            showMaxLabel: true,
            align: 'center',
            interval: 0,//使x轴文字显示全
          },
          // scale: false,
          data: []
        },
        // visualMap: {
        //   show: false,
        //   inRange: {
        //     symbolSize: [20, 50]
        //   }
        // },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          interval: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#DCDFE6',
              //这里是为了突出显示加上的
              //横轴信息全部显示
            }
          },
          axisLabel: {
            fontWeight: 400,
            fontFamily: 'Microsoft YaHei',
            fontSize: 18,
            color: '#303133',
            showMinLabel: true,
            showMaxLabel: true,
            // align: 'left',
            interval: 0,//使x轴文字显示全
          },
          data: [],
          scale: false
        },
        series: {
          type: 'scatter',
          // data: []
        }

}
mounted() {
    this.getHotWordsList()
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      // debugger
      this.chart = this.$echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
    },
    getSeariesData(val) {
     //先说下val的数据格式[{groupName:"",name:"",value:""},{groupName:"",name:"",value:""}]需要遍历data赋值的是索引。
     //val也可以是这种数据格式;val=[
  // xAxis    yAxis
  // [0, '世界和平', 2], // 意思是此点位于 xAxis: '星期一', yAxis: 'a',最后一位索引代表值。
  // [3, '中美关系', 1], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
  // [2, '防疫', 2], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
  // [3, '反垄断', 5]
]
//进行遍历此时data赋值其中一位索引值，这种配置不了图例
      this.option.series = val.map((d, i) => {
        return {
          type: 'scatter',
          name: d.name,//用来配置图例的也可以不要，需要跟lenged的data配置的名称一样
          label: {
            show: true,
            color:'#fff',
            formatter: function (params) {
              return val[params.seriesIndex].value;//气泡值
            }
          },
          symbolSize: d.value * 2,
          data: [[
            this.option.xAxis.data.indexOf(d.groupName),//x轴data的索引,因为数据格式是这种的，所以x轴都是去重，y轴也是
            this.option.yAxis.data.indexOf(d.name)//y轴data的索引
          ]],
          itemStyle: {
            color: this.colors[data[i]]//给每一种气泡设置的颜色值
          }
          //   data: [
          // [
          //   xData.indexOf(d.tech),
          //   yData.indexOf(d.business)
          // ]
          //   ]
        }
      })
    },
   }

没有2了就这样吧，给series赋值，xy轴赋值就ok了

标签：轴为,val,展示,color,type,yAxis,xAxis,data,气泡
来源： https://blog.csdn.net/weixin_42977442/article/details/118695012