vue中使用echarts
echarts的安装
npm install echarts --save
在vue-cli中引入echarts
import echarts from 'echarts'
全局注册echarts
Vue.prototype.$echarts = echarts
引入echarts以及在全局注册要写在main.js文件中（谨记）
vue项目中详细使用echarts
初始化echarts实例
var echarts = require("echarts");
绘制自己想要的图表
- 先构建html架构模块和基本的css样式属性
<div class="showdata"> <div id="chartColumn" ref="chart" :style="{width : '495px', height : '300px'}"></div> <div style="width: 10px;display: flex"></div> <div id="chartBar" :style="{width: '495px',height: '300px'}"></div> </div>
.showdata { display: flex; } #chartColumn { display: flex; background-color: rgba(36, 201, 196, 0.68); border: 1px solid #ccc; } #chartBar { display: flex; /*background-color: black;*/ /*background-color: rgba(14, 226, 219, 0.13);*/ background-color: rgba(58, 239, 218, 0.97); border: 1px solid #ccc; }
- 根据所需，绘图，将数据属性写入echarts中
drawColumnChart() { this.chartColumn = echarts.init(document.getElementById('chartColumn')); this.chartColumn.setOption({ title: { text: '通过淘汰占比', left: 'center', top : 20 }, tooltip: { trigger: 'item', formatter : "{b} : {c} ({d}%)" }, legend: { top :10, orient: 'vertical', left: 10 }, series: [ { name: '面试状态', type: 'pie', radius: '50%', label: { normal: { show: true, formatter: "{b} : {c} ({d}%)" } }, data: [ { value: 50, name: '通过' }, { value: 35, name: '淘汰' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, itemStyle: { normal: { color: function (params) { let colorList = [ "rgba(9,67,243,0.88)", "rgba(241,214,47,0.97)" ]; return colorList[params.dataIndex]; } } } } ] }); },
