echarts图表配置

一. 散点图

散点图基础结构：

dataset：ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

关于 dataset 的详情，请参见教程。

// 图例配置
legend: {
   left: 20,
   top: '8%',
   icon: 'circle', // 这里也可以是个图片
   itemHeight: 8,
   itemWidth: 8,
   // 图例组件的宽度。默认自适应auto；如果设置成100%，则表示不换行
   width: '100%',
   // 图例每项之间的间隔
   itemGap: 8
},
// 容器配置
grid: {
   left: '4%',
   right: '4%',
   top: '12%',
   bottom: -20,
   // label是否显示在图内
   containLabel: true
},
// X轴配置
xAxis: {
   show: false,
   type: 'value',
   // 强制设置坐标轴分割间隔，因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。
   interval: 4,
   boundaryGap: [0, 0.01]
},
// Y轴配置，注：X轴和Y轴属性配置基本一样
yAxis: {
   type: 'category',
   // 是否显示 y 轴。
   show: false,
   // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样,类目轴中 boundaryGap 可以配置为 true 和 false，默认为 true；非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围；
   boundaryGap: false,
   // 坐标轴刻度最大值，当坐标轴为百分比时，设置成1能够让多个柱状堆叠图高度一致。
   max: 1,
   // 坐标轴 轴线 相关设置
   axisLine: {
       show: false
   },
   // 坐标轴刻度相关设置
   axisTick: {
       show: false
   },
   // 坐标轴 刻度标签 的相关设置
   axisLabel: {
      fontSize: 12,
      color: '#000000',
      formatter: v => {
          const [skuId, skuName] = v.split('$_$');
          return  [
              `{skuId|${skuId}}`
          ]
      },
      // https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rich
      rich: {
          skuId: {
              color: '#000000',
              fontSize: 12,
              lineHeight: 16
          },
          skuName: {
              color: '#999'
          }
      }
  },
  // 是否自动缩放，只在数值轴中（type: 'value'）有效，在双数值轴的散点图中比较有用，在设置 min 和 max 之后该配置项无效。
  scale: true,
  // 坐标轴刻度最小值，max为设置最大值
  min: value => {
      return value.min - 4
  },
  data: data.categories
},
series: [
    {
        symbolSize: function (data) {
        	// 对于气泡图，大小是根据数值来的，我们可以将所有数据归到0到1，然后乘以一个固定大小
        	// 归到0到1，我们可以用当前数据除以当前数据中的最大值
            return data[2] / maxValue * 70;
        },
        color: '#F67A0E80',
        type: 'scatter', // line, bar
        // 散点图的数据结构为一个二维数组
        data: targetData,
        label: {
            show: true,
            position: 'right',
            // 距离图形元素的距离
            distance: 5,
            // 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40
            // 文字水平对齐方式，默认自动
            align: 'left',
            // 在distance基础上继续偏移
            offset: [10, 0],
            formatter: v => {
                const value = v.value;
                return value.toFixed(2);
            }
        },
        markLine: {
            silent: true,
            symbol: 'none',
            lineStyle: {
                color: '#AFAFAFFF'
            },
            // 标线数值的精度，在显示平均值线的时候有用，默认为2
            precision: 4,
            data: [
                {
                    type: 'average',
                    valueIndex: 1,
                    label: {
                        show: false
                    }
                },
                {
                    type: 'average',
                    valueIndex: 0,
                    label: {
                        show: false
                    }
                }
            ]
        }
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129