echarts中数据集(dataset)和数据转换(transform)联合使用,无需转换常见后台返回的对象数组JSON,实现折线堆叠图 

  1 let monitorContainer: HTMLElement;
  2 let monitorChart: echarts.ECharts;
  3 onMounted(() => {
  4   monitorContainer = document.getElementById('graduatedIncomeQuanguoChart');
  5   monitorChart = echarts.init(monitorContainer);
  6   const gqxsrOption = {
  7     // title: {
  8     //   text: '趋势分析图',
  9     //   textStyle: {
 10     //     fontSize: 30
 11     //   }
 12     // },
 13     legend: {
 14       show: true,
 15       textStyle: {
 16         color: '#FFF'
 17       }
 18     }, 
 27     tooltip: {
 28       transitionDuration: 0, // 防止宽度溢出外层div
 29       trigger: 'axis'
 30     },
 31     dataset: [
 32       {
 33         // dimensions: ['item', 'month', 'zzl'],//维度,不写则可以用索引表示,从0开始,当前即 0 表示item,1表示month,2表示zzl
 34         source: [
 35           { item: '全国', month: '6月', zzl: 11.3 },
 36           { item: '全国', month: '7月', zzl: 12.3 },
 37           { item: '全国', month: '8月', zzl: 13.3 },
 38           { item: '全国', month: '9月', zzl: 13.3 },
 39           { item: '全省', month: '6月', zzl: 15.1 },
 40           { item: '全省', month: '7月', zzl: 18.1 },
 41           { item: '全省', month: '8月', zzl: 12.1 },
 42           { item: '全省', month: '9月', zzl: 12.1 },
 43           { item: '全市', month: '6月', zzl: 10.4 },
 44           { item: '全市', month: '7月', zzl: 13.4 },
 45           { item: '全市', month: '8月', zzl: 18.4 },
 46           { item: '全市', month: '9月', zzl: 18.4 },
 47           { item: '全区', month: '6月', zzl: 17.4 },
 48           { item: '全区', month: '7月', zzl: 12.4 },
 49           { item: '全区', month: '8月', zzl: 16.4 },
 50           { item: '全区', month: '9月', zzl: 16.4 }
 51         ]
 52       },
 53       {
 54         // 这个 dataset 的 index 是 `1`。
 55         // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
 56         transform: {
 57           type: 'filter',
 58           config: {
 59             // 使用 and 操作符。
 60             // 类似地，同样的位置也可以使用 “or” 或 “not”。
 61             // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
 62             and: [{ dimension: 'item', '=': '全国' }]
 63           }
 64         }
 65         // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
 66         // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
 67         // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
 68         // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
 69         // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
 70       },
 71       {
 72         transform: {
 73           type: 'filter',
 74           config: {
 75             // 使用 and 操作符。
 76             // 类似地，同样的位置也可以使用 “or” 或 “not”。
 77             // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
 78             and: [{ dimension: 'item', '=': '全省' }]
 79           }
 80         }
 81       },
 82       {
 83         transform: {
 84           type: 'filter',
 85           config: {
 86             // 使用 and 操作符。
 87             // 类似地，同样的位置也可以使用 “or” 或 “not”。
 88             // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
 89             and: [{ dimension: 'item', '=': '全市' }]
 90           }
 91         }
 92       },
 93       {
 94         transform: {
 95           type: 'filter',
 96           config: {
 97             // 使用 and 操作符。
 98             // 类似地，同样的位置也可以使用 “or” 或 “not”。
 99             // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
100             and: [{ dimension: 'item', '=': '全区' }]
101           }
102         }
103       }
104     ],
105     xAxis: {
106       type: 'category',
107       axisLabel: {
108         interval: 0, // 强制标签全部显示
109         textStyle: {
110           show: true,
111           fontFamily: '微软雅黑',
112           color: '#ffffff',
113           fontSize: '10'
114           // fontWeight: 'bold'
115         }
116       }
117     },
118     yAxis: {},
119     series: [
120       {
121         type: 'line',
122         datasetIndex: 1,
123         name: '全国',
124         encode: {
125           tooltip: ['item', 'zzl'],
126           itemName: 0,
127           x: [1], // 表示维度 1,即month映射到 x 轴。
128           y: [2] // 表示维度 2即zzl映射到 y 轴。
129         }
130       },
131       {
132         type: 'line',
133         datasetIndex: 2,
134         name: '全省',
135         encode: {
136           tooltip: ['item', 'zzl'],
137           x: [1], // 表示维度 1 映射到 x 轴。
138           y: [2] // 表示维度 2 映射到 y 轴。
139         }
140       },
141       {
142         type: 'line',
143         datasetIndex: 3,
144         name: '全市',
145         encode: {
146           tooltip: ['item', 'zzl'],
147           x: [1], 
148           y: [2] 
149         }
150       },
151       {
152         type: 'line',
153         datasetIndex: 4,
154         name: '全区',
155         encode: {
156           tooltip: ['item', 'zzl'],
157           x: [1], 
158           y: [2] 
159         }
160       }
161     ]
162   };
163   monitorChart.setOption(gqxsrOption);
164 
165 
166 });

 

posted @ 2023-10-23 10:32  dirgo  阅读(820)  评论(0)    收藏  举报