echarts 散点图修改散点图中图形形状颜色大小

最新推荐文章于 2024-07-04 16:37:43 发布

红烧咸咸鱼

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量303

点赞数 2

分类专栏： echarts 文章标签： echarts 前端 javascript 修改散点图中图形形状颜色

本文链接：https://blog.csdn.net/weixin_44180579/article/details/139097170

版权

echarts 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

在这里插入图片描述


let option = {
                color:['xxx', 'xxx', 'xxx', 'xxx'], //直接设置color可修改图形颜色
                title: {
                  text: '散点图图形',
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                legend: {
                  top: 2,
                  right:2,
                  itemWidth: 10,
                  itemHeight: 10,
                  textStyle:{
                    fontSize:14
                  },
                  //legend里面的data属性可以设置值为对象数组 icon属性可设置点的形状
                  data:[
                    {  name: 'aaa', icon: 'square' },
                    {  name: 'bbb', icon: 'square' },
                    {  name: 'ccc', icon: 'circle' },
                    {  name: 'ddd', icon: 'triangle' }
                  ]
                },
                grid: {
                  left: '2%',
                  right: '2%',
                  bottom: 10,
                  containLabel: true
                },
                xAxis: {},
                yAxis: {
                    type: 'value',
                    name: '测试',
                    nameTextStyle: {
                      color: '#6E707D',
                      fontSize:14
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                      margin: 2,
                      interval: 15,
                      color: '#6E707D'
                    }
                },
                series: [
                  {
                    name: 'aaa',
                    type: 'scatter',
                    // series里面data 也可以设置为对象数组 symbol可设置图形形状
                    data: [
                        // 正方形点
                        { value: [1, 5], symbol: 'square' },
                        { value: [6, 15], symbol: 'square' },
                        { value: [4, 9], symbol: 'square' },
                        { value: [10, 25], symbol: 'square' },
                        { value: [15, 25], symbol: 'square' },
                    ]
                  },
                  {
                    name: 'bbb',
                    type: 'scatter',
                    data: [
                        // 正方形点
                        { value: [6, 5], symbol: 'square' },
                        { value: [12, 15], symbol: 'square' },
                        { value: [1, 9], symbol: 'square' },
                        { value: [8, 25], symbol: 'square' },
                        { value: [7, 16], symbol: 'square' },
                    ]
                  },
                  {   
                      name:'ccc',
                      type: 'scatter',
                      data: [
                          // 圆形点
                          { value: [1, 2], symbol: 'circle' },
                          { value: [4, 2], symbol: 'circle' },
                          { value: [3, 10], symbol: 'circle' },
                          { value: [6, 8], symbol: 'circle' },
                          { value: [10, 20], symbol: 'circle' },
                      ]
                  },
                  {
                      name:'ddd',
                      type: 'scatter',
                      data: [
                          // 三角形点
                          { value: [2, 30], symbol: 'triangle' },
                          { value: [10, 25], symbol: 'triangle' },
                          { value: [8, 10], symbol: 'triangle' },
                          { value: [22, 32], symbol: 'triangle' },
                          { value: [16, 20], symbol: 'triangle' },
                      ]
                  }
              ]
              }