echarts常用3类图demo(饼图、柱图、折线图)
作者:互联网
1.搭建vue-cli项目
2.安装echarts
$ yarn add echarts
3.main.js引入echarts
1 import echarts from 'echarts' 2 Vue.prototype.$echarts = echarts // 把echarts挂载到Vue原型
4.直接上Home.vue代码
1 <template> 2 <div class="home"> 3 <div id="echarts_pie" class="echarts"></div> 4 <div id="echarts_bar" class="echarts"></div> 5 <div id="echarts_line" class="echarts"></div> 6 </div> 7 </template> 8 9 <script> 10 11 export default { 12 name: 'Home', 13 data() { 14 return { 15 myEcharts: null 16 } 17 }, 18 methods: { 19 initEcharts() { 20 var echartsPie = this.$echarts.init(document.getElementById('echarts_pie')) 21 var echartsBar = this.$echarts.init(document.getElementById('echarts_bar')) 22 var echartsLine = this.$echarts.init(document.getElementById('echarts_line')) 23 echartsPie.setOption({ 24 title: { 25 text: '运动员分布图', // 图标标题 26 }, 27 series: [{ 28 name: '运动员分布图', 29 type: 'pie', // 图类型-饼图 30 radius: '55%', // 图占容器大小 31 data: [ // 饼图数据格式 32 { 33 value: 235, 34 name: '珠三角', 35 itemStyle: { 36 color: 'skyblue', // 某一项的颜色 37 } 38 }, 39 { 40 value: 123, 41 name: '粤东', 42 itemStyle: { 43 color: 'orange' 44 } 45 }, 46 { 47 value: 154, 48 name: '粤西', 49 itemStyle: { 50 color: 'yellowgreen' 51 } 52 }, 53 { 54 value: 88, 55 name: '粤北', 56 itemStyle: { 57 color: 'pink' 58 } 59 } 60 ], 61 itemStyle: { 62 normal: { 63 shadowBlur: 20, // 阴影散发长度 64 shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 65 label: { 66 show: true, // 是否显示标识文字 67 fontSize: 16, // 字体大小,单位px 68 formatter: '{b} : {c} ({d}%)', // a=>series.name b=>series.data.name c=>series.data.value, d=>占比 69 } 70 } 71 } 72 }] 73 }) 74 75 echartsBar.setOption({ 76 title: { 77 text: '运动员分布图', // 图标题 78 }, 79 color: ['purple', 'red'], // 柱图调色盘 80 xAxis: { 81 data: [ 82 { 83 value: '珠三角', 84 textStyle: { 85 color: 'skyblue', 86 fontSize: 16 87 } 88 }, 89 { 90 value: '粤东', 91 textStyle: { 92 color: 'orange', 93 fontSize: 16 94 } 95 }, 96 { 97 value: '粤西', 98 textStyle: { 99 color: 'yellowgreen', 100 fontSize: 16 101 } 102 }, 103 { 104 value: '粤北', 105 textStyle: { 106 color: 'pink', 107 fontSize: 16 108 } 109 } 110 ] 111 }, 112 yAxis: {}, // 必须 113 legend: { 114 data: ['男', '女'] 115 }, 116 series: [ 117 { 118 name: '男', 119 type: 'bar', // 图类型-饼图 120 data: [100, 60, 84, 66], // 饼图数据格式 121 itemStyle: { 122 normal: { 123 label: { 124 show: true, // 显示对应文字 125 position: 'top', // 在上方显示 126 textStyle: { // 文字样式 127 color: 'purple', 128 fontSize: 16 129 } 130 } 131 } 132 } 133 }, 134 { 135 name: '女', 136 type: 'bar', // 图类型-饼图 137 data: [135, 63, 70, 22], // 饼图数据格式 138 itemStyle: { 139 normal: { 140 label: { 141 show: true, // 显示对应文字 142 position: 'top', // 在上方显示 143 textStyle: { // 文字样式 144 color: 'red', 145 fontSize: 16 146 } 147 } 148 } 149 } 150 } 151 ] 152 }) 153 154 echartsLine.setOption({ 155 title: { 156 text: '运动员分布图', // 图标题 157 }, 158 color: ['purple', 'red'], // 柱图调色盘 159 xAxis: { 160 data: [ 161 { 162 value: '珠三角', 163 textStyle: { 164 color: 'skyblue', 165 fontSize: 16 166 } 167 }, 168 { 169 value: '粤东', 170 textStyle: { 171 color: 'orange', 172 fontSize: 16 173 } 174 }, 175 { 176 value: '粤西', 177 textStyle: { 178 color: 'yellowgreen', 179 fontSize: 16 180 } 181 }, 182 { 183 value: '粤北', 184 textStyle: { 185 color: 'pink', 186 fontSize: 16 187 } 188 } 189 ] 190 }, 191 yAxis: {}, // 必须 192 legend: { 193 data: ['男', '女'] 194 }, 195 series: [ 196 { 197 name: '男', 198 type: 'line', // 图类型-折线图 199 data: [100, 60, 84, 66], // 折线图数据格式 200 itemStyle: { 201 normal: { 202 label: { 203 show: true, // 显示对应文字 204 position: 'top', // 在上方显示 205 textStyle: { // 文字样式 206 color: 'purple', 207 fontSize: 16 208 } 209 } 210 } 211 } 212 }, 213 { 214 name: '女', 215 type: 'line', // 图类型-折线图 216 data: [135, 63, 70, 22], // 折线图数据格式 217 itemStyle: { 218 normal: { 219 label: { 220 show: true, // 显示对应文字 221 position: 'top', // 在上方显示 222 textStyle: { // 文字样式 223 color: 'red', 224 fontSize: 16 225 } 226 } 227 } 228 } 229 } 230 ] 231 }) 232 } 233 }, 234 mounted() { 235 this.initEcharts() 236 } 237 } 238 </script> 239 <style scoped> 240 .echarts { 241 display: inline-block; 242 width: 700px; 243 height: 500px; 244 margin-left: 100px; 245 /* border: 1px solid #c0c0c0; */ 246 } 247 </style>
标签:16,color,demo,类图,value,柱图,fontSize,data,echarts 来源: https://www.cnblogs.com/alt-fsh/p/13686356.html