ElementUI中使用ECharts
直接引入echarts (安装echarts项目依赖)npm install echarts --save//或者npm install echarts -S全局引入(我们安装完成之后,可以在 main.js 中全局引入 echarts)import echarts from "echarts";Vue.prototype.$echarts = echarts;举例饼图<...
·
- 直接引入echarts (安装echarts项目依赖)
npm install echarts --save //或者 npm install echarts -S
- 全局引入(我们安装完成之后,可以在 main.js 中全局引入 echarts)
import echarts from "echarts"; Vue.prototype.$echarts = echarts;
- 举例饼图
<el-row :gutter="20"> <el-col :span="12"> <el-card header="车辆类型统计" style="font-weight: bold;"> <div ref="myEchart1" style="height: 350px;"> </div> </el-card> </el-col> <el-col :span="12"> <el-card header="车辆出租状态统计" style="font-weight: bold;"> <div ref="myEchart2" style="height: 350px;"> </div> </el-card> </el-col> </el-row>
获取数据函数//车辆类型统计 initChart1(typeTitle, typeData) { let app = this; let myChart = app.$echarts.init(this.$refs.myEchart1); let option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: typeTitle }, series: [ { name: '车辆类型统计', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: typeData } ] }; myChart.setOption(option); }, //车辆出租状态统计 initChart2(num1, num2, num3) { let app = this; let myChart = app.$echarts.init(this.$refs.myEchart2); let option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { bottom: 10, left: 'center', data: ['已出租', '未出租', '已预约'] }, series: [ { name: '车辆出租状态', type: 'pie', radius: '55%', center: ['50%', '40%'], data: [ {value: num1, name: '已出租'}, {value: num2, name: '未出租'}, {value: num3, name: '已预约'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); },
在mounted中加载queryStatisticData函数即可向后端索取数据实现饼图显示//获取统计图数据 queryStatisticData(formData) { let app = this; app.$Api.queryStatisticData(formData, function (result) { var carStatus1 = result.car1; var carStatus2 = result.car2; var carStatus3 = result.car3; app.initChart2(carStatus1, carStatus2, carStatus3); app.carTypes = result.carTypes; app.carTypeNum = result.carTypeNum; var typeTitle = []; var typeData = []; for (var i = 0; i < app.carTypes.length; i++) { var itemArr = { value: app.carTypeNum[i], name: app.carTypes[i] }; typeData.push(itemArr); typeTitle.push(app.carTypes[i]); } app.initChart1(typeTitle, typeData); }) },
更多推荐
已为社区贡献3条内容
所有评论(0)