Vue中使用echarts水球图

Vue中使用echarts水球图

首先，我们需要配置环境，需要下载echarts依赖和水球图依赖echarts-liquidfill

1.你需要npm install 来下载他们，下面是代码：

npm install echarts --save
npm install echarts-liquidfill@2.0.6 --save

2.待依赖安装完成，我们需要在main.js中注册它

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入echarts
import * as echarts from 'echarts'
// 引入水球图
import 'echarts-liquidfill'

// 在vue全局绑定
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.此时对环境的安装就完成了，接下来我们开始创建水球图图表吧，首先需要创建一个块元素来当作画布，注意：这个块元素必须要有宽高！！！

<div
     :id="boxId"
     :style="{ width: '400px', height: '300px' }"
></div>

4.然后在vue钩子函数mounted去调用函数，代码如下：

mounted() {
    // 挂载后调用创建水球图函数
    this.createWater()
  },
  data() {
    return {
      // 动态id，确保封装成组件后每个组件不受影响
      boxId: 'Waterbox' + new Date().getTime(),
    }
},
methods: {
    // 方法
    createWater() {
      var myChart = this.$echarts.init(document.getElementById(`${this.boxId}`))
      var option = {
        title: {
          text: '水球图',
          left: this.WaterData.Left,
          top: 10,
          textStyle: {
            color: '#333',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series: [
          {
            name: 'water echart',
            type: 'liquidFill',
            radius: '200px',
            data: [0.6],  
		// 水球图中的水位，0-1之间，若想要多个波纹，可写多条数据[0.6, 0.5, 0.8]，
		// 如果想要不显示，可以设置label中的textStyle.fontSize为 0
            label: {
              normal: {
                color: '#27e5f1',
                insideColor: '#fff',
                textStyle: {
                  fontSize: 40,  // 此处设置为0时文字消失
                  fontWeight: 'bold'
                }
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['#6a7feb'] // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ['#27e5f1'] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ],
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#27e5f1',  // 水球图外边框的颜色
                borderWidth: 3  // 水球图外边框的宽度
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },

更多配置项可以去官网查看echarts-liquidfill

我是卡卡罗特，一个写代码的设计师