1.引入ECharts文件
echarts.min.js
echarts.vue
可以在ECharts 在线构建下载
可以在ECharts页面模板 - DCloud 插件市场里面找echarts.min.js和echarts.vue
2.在页面中引用文件
<!-- 统计图 -->
<view class="fengx">
<view class="container">
<view class="title">统计分布</view>
<!-- <mpvue-echarts :echarts="echarts" :onInit="onInit" /> -->
<mpvue-echarts @onInit="lineInit" canvasId="line" ref="lineChart" />
</view>
<view class="lookMore" @click="gotoRisk">查看详情</view>
</view>
3.js部分
<script>
import {
mapState,
mapMutations
} from 'vuex';
import * as echarts from '@/components/echarts/echarts.min.js';
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
export default {
// 注册组件
components: {
mpvueEcharts,
},
data() {
return {
echarts,
total:0,//统计图总数
}
},
onLoad() {
},
onShow() {
this.$nextTick(() => {
this.StatisticsInfo(); // 加载风险图表
});
this.GetLoginUserInfo();
},
methods: {
//统计图
lineInit(e) {
let {
width,
height
} = e;
let canvas = this.$refs.lineChart.canvas;
echarts.setCanvasCreator(() => canvas);
let lineChart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(lineChart);
// 圆环图各环节的颜色
var color = ['#91CC75', '#73C0DE', '#FAC858', '#EE6666'];
// 圆环图各环节的名称和值(系列中各数据项的名称和值)
let statistics = uni.getStorageSync('Echarts')
let totals = uni.getStorageSync('total')
var data = statistics
var option = {
//中间标题
title: {
zlevel: 0,
text: [
'{value|' + totals + '}',
'{name|总风险数}',
].join('\n'),
rich: {
value: {
color: '#303133',
fontSize: 32,
fontWeight: 'bold',
lineHeight: 40,
},
name: {
color: '#909399',
lineHeight: 20
},
},
top: 'center',
left: 'center',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#303133',
fontSize: 32,
fontWeight: 'bold',
lineHeight: 40,
},
name: {
color: '#909399',
lineHeight: 20
},
},
},
},
// 图例
legend: [{
orient: 'vertical',
top: '10%',
x: 'right',
data: ['低风险', '一般风险', '较大风险', '重大风险'],
formatter: function(name) {
// 获取legend显示内容
let data = option.series[0].data;
let total = 0;
let tarValue = 0;
for (let i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
let p = ((tarValue / total) * 100).toFixed(0);
return name + ' ' + ' ' + tarValue + '';
},
}],
// 提示框
tooltip: {
show: true, // 是否显示提示框
formatter: '{b}占比:{d}%' // 提示框显示内容,此处{b}表示各数据项名称,此项配置为默认显示项,{c}表示数据项的值,默认不显示,({d}%)表示数据项项占比,默认不显示。
},
// 系列列表
series: [{
avoidLabelOverlap: false,
name: '圆环图系列名称', // 系列名称
type: 'pie', // 系列类型
center: ['40%', '50%'], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: ['40%', '70%'], // 饼图的半径,数组的第一项是内半径,第二项是外半径。[ default: [0, '75%'] ]
hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
color: color, // 圆环图的颜色
left: '6%',
label: {
show: false,
},
labelLine: {
show: false
},
data: data // 系列中的数据内容数组。
}]
}
lineChart.setOption(option);
this.$refs.lineChart.setChart(lineChart);
},
async GetLoginUserInfoAsync() {
await this.GetLoginUserInfo();
},
//获取统计图信息
StatisticsInfo(e) {
this.$api.GetSumNumber().then((res) => {
if (res) {
this.User = res.data;
//统计图总数
this.total = res.data.TotalNumber;
uni.setStorage({
key: 'total',
data: this.total
});
this.statistics = [{
name: '低风险',
value: this.User.LowerNumber
}, {
name: '一般风险',
value: this.User.ComNumber
}, {
name: '较大风险',
value: this.User.MiddleNumber
}, {
name: '重大风险',
value: this.User.SeniorNumber
}]
uni.setStorage({
key: 'Echarts',
data: this.statistics
});
}
});
},
}
}
</script>
4.css文件
.fengx {
background: #FFFFFF;
// margin: 0 20rpx;
padding-bottom: 32rpx;
.container {
// width: 400rpx;
height: 400rpx;
background: #FFFFFF;
margin: 0 20rpx;
text-align: center;
padding-bottom: 40rpx;
.title {
padding: 20rpx 20rpx 0;
text-align: left;
font-size: 34rpx;
font-weight: 500;
color: #333333;
}
}
.lookMore {
text-align: center;
padding: 20rpx 0;
font-size: 20rpx;
background: rgba(82, 196, 109, 0.1000);
border-radius: 4px 4px 4px 4px;
margin: 0 240rpx;
font-size: 26rpx;
font-weight: 400;
color: #52C46D;
}
}