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 }, 19 label: { 20 show: true, 21 // labelText在bar外右上方 22 position: 'top', 23 offset: [0, 0], 24 // distance: -25, 25 color: '#ffffff' 26 }, 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 });