【echarts】散点图写九宫格

Point酱

已于 2022-02-28 17:23:38 修改

阅读量1.2k

点赞数

分类专栏： ECharts 文章标签： echarts 前端 javascript

于 2022-02-28 17:20:14 首次发布

本文链接：https://blog.csdn.net/weixin_40571965/article/details/123187437

版权

ECharts 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

这段代码展示了如何使用Echarts库创建一个散点图，并特别配置了x轴和y轴的刻度线颜色，每两个刻度线交替显示不同颜色，包括红色和灰色。此外，还设置了图表的提示框（aria）和数据标签（itemStyle）等功能，使得图表具有更好的视觉效果和交互性。

摘要由CSDN通过智能技术生成

实现效果

option = {
  xAxis: {
    min: 0.0,
    max: 9.0,
    interval: 1,
    splitLine: {
        show: true,
        lineStyle:{
          color: ['#DEDEDE','#DEDEDE','DEDEDE','red','#DEDEDE','#DEDEDE','red','#DEDEDE','#DEDEDE','red'],
          width: 1,
          type: 'solid'
      }
　　}
  },
  yAxis: {
    min: 0.0,
    max: 9.0,
    interval: 1,
     splitLine: {
        show: true,
        lineStyle:{
           color: ['#DEDEDE','#DEDEDE','DEDEDE','red','#DEDEDE','#DEDEDE','red','#DEDEDE','#DEDEDE','red'],
           width: 1,
           type: 'solid'
      }
　　}
  },

  aria: {
    show: true
  },
  series: [
    {
      
      symbolSize: 35,
      data: [
        [1.2, 8, '深井冰'],
        [4.1, 2.1, '秃头'],
        [5, 2, '骗你学'],
        [8, 8, '计算机']
      ],
      type: 'scatter',
      itemStyle: {
        normal: {
          color:'#61A8FF',
          label: {
            color: 'red',
            show: true,
            fontWeight:600,
            position: 'inside',
            
            formatter: function (params, ticket, callback) {
              var s = params.value[2];
              return s;
            }
          }
        }
      }
    }
  ]
};

https://github.com/PointWu/echarts-demohttps://github.com/PointWu/echarts-demo