在vue 中引入echarts 中散点图，并修改横坐标为自己的数据内容_echarts 散点图横纵坐标都为文字怎么处理-CSDN博客

本文链接：https://blog.csdn.net/weixin_51192038/article/details/123552547

本文展示了如何使用 ECharts 在一个1000x500像素的图表中创建动态散点图，通过JavaScript计算并设置不同区间的数据颜色。数据点的颜色根据值的范围变化，提供了详细的配置和 tooltip 交互示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>
	<el-row>
     	 <div style="height: 500px;width: 1000px;" id="sandiantu">		
    </el-row>
  </div>

<script>
import * as echarts from "echarts";
export default {
data(){
	return{}
},
mounted() {
    let bar = echarts.init(document.getElementById('sandiantu'));
    let option = {
      title: {
              text: '1111111111',
              left: 'center',
              fontSize: 14,//标题显示的位置
            },
      xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        splitLine: {
          show: true
        },
      },
      yAxis: {
        axisLine: {
          show: true
        },
        splitLine: {
          show: true
        },
      },
      tooltip: {
        /* 当鼠标划过时，返回需要的信息*/
        position: 'top',
        formatter: function (param) {
          var value = param.value;
          return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[0] + '(' + value[1] + ')' +
            '</div>';
        }
      },
      series: [
        {
          //改变散点的颜色，根据判断
          itemStyle: {
            normal: {
              color: function (params) {
                if (params.value[1] > 0 && params.value[1] < 5) {
                  return "#FE8463";
                } else if (params.value[1] >= 5 && params.value[1] <= 10) {
                  return "#27727B";
                }
                return "#9BCA63";
              }
            }
          },
          type: 'scatter',
          data: [
            data: [
        	['Sun', 8.04],
        	['Sun', 6.95],
        	['Sun', 1.58],
       	 	['Tue', 8.81],
        	['Tue', 8.33],
        	['Tue', 7.66],
        	['Tue', 6.81],
        	['Tue', 6.33],
	        ['Mon', 8.96],
	        ['Mon', 6.82],
	        ['Mon', 7.2],
	        ['Mon', 7.2],
	        ['Mon', 4.23],
	        ['Wed', 7.83],
	        ['Wed', 4.47],
	        ['Wed', 3.33],
	        ['Wed', 4.96],
	        ['Thu', 7.24],
	        ['Thu', 6.26],
	        ['Thu', 8.84],
	        ['Sat', 5.82],
	        ['Fri', 5.68]
		      ],
          ],
          <!-- symbolSize 为让散点图形的大小根据数据变化*40倍-->
          symbolSize: function (dataItem) {
            return dataItem[1] * 4; 
          }
        }
      ]
    };
    bar.setOption(option);
  }
}
</script>

在vue 中 引入echarts 中散点图，并修改横坐标为自己的数据内容

在vue 中引入echarts 中散点图，并修改横坐标为自己的数据内容