日常记录：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

<div id="liquidfill-chart"></div>

<style scoped>  #liquidfill-chart {    width: 100%;    height: 140px;    margin-bottom: 10px;  }</style>

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

• 引入方法

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