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 });
