uniapp引用ECharts实现图表功能

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;
      }
    }