echarts-liquidfill使用

第一步：echarts与echarts-liquidfill添加到项目

• 添加echarts

 npm install echarts --save

• 添加echarts-liquidfill组件

npm install echarts-liquidfill

第二步：引用

import echarts from 'echarts'
import liquidfill from 'echarts-liquidfill'

第三步：html,css

第四步：初始化模版（为了方便多个页面共同使用）

• 引入方法

import { initOption as ioption } from 'liquidfillOptions.js'

export default{
    data() {
      return {
        opt: ioption
      }
    }
}

• liquidfillOptions.js文件----这里放水球图的通用设置。

export let initOption = {
  series:[{
    type: 'liquidFill',
    data: [0.5, 0.4, 0.3, 0.2],
    outline: {
      show: false
    },
    shape: 'container',
    label: {
      normal: {
        formatter: function () {
          return '这里是我要在js中获取的数据';
        },
        textStyle: {
          color: '#D94854'
        }
      }
    }
  }]
}

第五步：js获取

    mounted() {
      var _this = this;
      _this.$http.get('api地址').then((res) => {
        res = JSON.parse(res);
        let _chart = echarts.init(document.getElementById("liquidfill-chart"));
        /*获取*/
        _this.opt.series[0].label.normal.formatter = function () {
          return res.yDatas[0] + '元';
        }
        _chart.setOption(_this.opt);
      });
    }