vue中使用Echart将一组数据展示出三种统计图
作者：互联网
1 <template>
2 <div class="container">
3 <div id="myEchart" style="height: 800px"></div>
4 </div>
5 </template>
6
7 <script>
8 import echarts from 'echarts'
9 import echartChina from './mixin/echartChina.js'
10 import chinaJson from 'echarts/map/json/china.json'
11 export default {
12 name: 'text',
13 data () {
14 return {
15 mapData: [
16 {name: '北京',value: '555'},
17 {name: '天津',value: '1000'},
18 {name: '上海',value: '100'},
19 {name: '重庆',value: '100'},
20 {name: '河北',value: '600'},
21 {name: '河南',value: '400'},
22 {name: '云南',value: '350'},
23 {name: '辽宁',value: '70'},
24 {name: '黑龙江',value: '750'},
25 {name: '湖南',value: '10'},
26 {name: '安徽',value: '300'},
27 {name: '山东',value: '10'},
28 {name: '新疆',value: '400'},
29 {name: '江苏',value: '80'},
30 {name: '浙江',value: '160'},
31 {name: '江西',value: '150'},
32 {name: '湖北',value: '650'},
33 {name: '广西',value: '200'},
34 {name: '甘肃',value: '180'},
35 {name: '山西',value: '666'},
36 {name: '内蒙古',value: '120'},
37 {name: '陕西',value: '222'},
38 {name: '吉林',value: '520'},
39 {name: '福建',value: '220'},
40 {name: '贵州',value: '900'},
41 {name: '广东',value: '500'},
42 {name: '青海',value: '500'},
43 {name: '西藏',value: '800'},
44 {name: '四川',value: '700'},
45 {name: '宁夏',value: '10'},
46 {name: '海南',value: '590'},
47 {name: '台湾',value: '780'},
48 {name: '香港',value: '850'},
49 {name: '澳门',value: '999'},
50 {name: '南海诸岛',value: '700'}
51 ]
52 }
53 },
54 mounted () {
55 let myChartChina = this.$echarts.init( document.getElementById('myEchart'))
56 let mapName = [];
57 for (let i in this.mapData){
58 mapName.push(this.mapData[i].name);
59 }
60 this.$echarts.registerMap('china', chinaJson)
61 this.adaptWindowResize(myChartChina)
62 let optionMap = {
63 backgroundColor: '#000', //背景颜色
64 title: {
65 text: '刷脸支付数据',
66 subtext: '',
67 x:'center',
68 top: '20',
69 textStyle: {
70 color: '#fff',
71 },
72 subtextStyle: {
73 color: '#fff' // 副标题文字颜色
74 }
75 },
76 tooltip: {
77 show:true, //鼠标移入是否触发数据
78 trigger: 'item', //出发方式
79 textStyle:{ //提示框内容样式
80 color:"#fff"
81 },
82 formatter:'{b}-销售数量：{c}'
83 },
84 //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
85 visualMap: {
86 min: 0, //最小值
87 max: 1000, //最大值
88 left: 'left',
89 top: 'bottom',
90 calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
91 inRange: {
92 // color: ['#6BB7D9', '#ABC36C', '#E0CF18','#E5CC0F', '#C76646'] //颜色
93 color: ['#DAFAFC', '#73B8EE', '#0873DE']
94 },
95 textStyle: {
96 color: '#fff'
97 },
98 dimension: 0
99 },
100 grid: {
101 right: 40,
102 top: 100,
103 bottom: 40,
104 width: '15%'
105 },
106 xAxis: [{
107 position: 'top',
108 type: 'value',
109 boundaryGap: [0, 0.01],
110 splitLine: {
111 show: false
112 },
113 axisLine: {
114 show: false
115 },
116 axisTick: {
117 show: false
118 },
119 axisLabel: {
120 show:true,
121 margin: 5,
122 color: '#f5f5f5'
123 }
124 }],
125 yAxis: [{
126 type: 'category',
127 data: mapName,
128 axisLine: {//Y轴的样式
129 show: true,
130 lineStyle:{
131 color:'#fff',
132 width:1,
133 type:'solid',
134 },
135 },
136 axisTick: {
137 alignWithLabel: true
138 },
139 axisLabel: {
140 show:true,
141 color: '#f5f5f5'
142 }
143 }],
144 //配置地图的数据，并且显示
145 series:[
146 {
147 z: 1,
148 name:'地图',
149 type: 'map', //地图种类
150 map: 'china', //地图类型。
151 left: '10',
152 right: '30%',
153 top: 20,
154 bottom: '40%',
155 zoom:0.75,//放大比例
156 itemStyle: { //地图区域的多边形 图形样式。
157 normal: {
158 borderColor: '#ccc',//边框颜色
159 borderWidth: 1,
160 label: {
161 show: true,
162 textStyle: {
163 color: '#fff'//文字显示颜色
164 }
165 }
166 },
167 emphasis:{ //高亮状态下的样试
168 label:{
169 show:true,
170 }
171 }
172 },
173 label: { //图形上的文本标签，可用于说明图形的一些数据信息
174 show:true,
175 },
176 data: this.mapData,
177 },
178 {
179 z: 2,
180 name:'柱状图',
181 type: 'bar', //地图种类
182 data: this.mapData,
183 itemStyle: { //地图区域的多边形 图形样式。
184 emphasis: {
185 color: "rgb(254,153,78)"
186 }
187 },
188 label: {
189 show:true,
190 },
191 },
192 {
193 z: 3,
194 name: '扇形图',
195 type: 'pie',
196 radius: ['23%', '30%'],
197 center: ['30%', '75%'],
198 data: this.mapData,
199 itemStyle: {
200 emphasis: {
201 shadowBlur: 10,
202 shadowOffsetX: 0,
203 shadowColor: 'rgba(0, 0, 0, 0.5)'
204 }
205 }
206 }
207 ]
208 }
209 myChartChina.setOption(optionMap)
210 }
211 }
212 </script>
213
214 <style scoped>
215
216 </style>
效果图
标签：vue,Echart,show,color,统计图,value,type,true,name 来源： https://www.cnblogs.com/xiuxiume/p/11989428.html