标签：轴为 val 展示 color type yAxis xAxis data 气泡

效果图如下

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

实现方式

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。