ECharts之水球圖

效果圖

背景圖片

下載

npm install echarts --save
npm install echarts-liquidfill --save

引入並註冊

    在 main.js 文件裏引入並註冊 ( 這裏是 Vue3.0 的模板 )

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

import echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

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

在組件中使用

<template>
  <div class='wrapper'>
    <div class="inner">
      <div class='chart' id='chart'></div>
      <div class="btm"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基於準備好的dom，初始化echarts實例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 監聽屏幕變化自動縮放圖表
      window.addEventListener('resize', function () {
        chart.resize()
      })
      // 繪製圖表
      chart.setOption({
        // 圖表主標題
        title: {
          text: '全國就業率', // 主標題文本，支持使用 \n 換行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本樣式
            fontSize: 30,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框組件
        tooltip: {
          trigger: 'item', // 觸發類型, 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
          textStyle: {
            color: '#fff' // 文字顏色
          },
          // 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
          // 水球圖: {a}（系列名稱），{b}（無），{c}（數值）
          // 使用函數模板   傳入的數據值 -> value: number|Array,
          formatter: function (value) {
            return value.seriesName + ': ' + value.data * 100 + '%'
          }
        },
        series: [{
          type: 'liquidFill',
          name: '全國就業率', // 系列名稱，用於tooltip的顯示，legend 的圖例篩選
          radius: '62%', // 水球圖的半徑
          center: ['50%', '60%'], // 水球圖的中心（圓心）座標，數組的第一項是橫座標，第二項是縱座標
          // 水填充圖的形狀 circle 默認圓形  rect 圓角矩形  triangle 三角形  
          // diamond 菱形  pin 水滴狀 arrow 箭頭狀  還可以是svg的path
          shape: 'circle',
          phase: 0, // 波的相位弧度 不設置  默認自動
          direction: 'right', // 波浪移動的速度  兩個參數  left 從右往左 right 從左往右
          outline: {
            show: true,
            borderDistance: 0, // 邊框線與圖表的距離 數字
            itemStyle: {
              opacity: 1, // 邊框的透明度   默認爲 1
              borderWidth: 1, // 邊框的寬度
              shadowBlur: 1, // 邊框的陰影範圍 一旦設置了內外都有陰影
              shadowColor: '#fff', // 邊框的陰影顏色,
              borderColor: '#41dcd8' // 邊框顏色
            }
          },
          // 圖形樣式
          itemStyle: {
            color: '#4077eb', // 水球顯示的背景顏色
            opacity: 0.5, // 波浪的透明度
            shadowBlur: 10 // 波浪的陰影範圍
          },
          backgroundStyle: {
            color: '#407bf3', // 水球未到的背景顏色
            opacity: 0.5
          },
          // 圖形的高亮樣式
          emphasis: {
            itemStyle: {
              opacity: 0.8 // 鼠標經過波浪顏色的透明度
            }
          },
          // 圖形上的文本標籤
          label: {
            fontSize: 55,
            fontWeight: 400,
            color: '#fff'
          },
          data: [0.62] // 系列中的數據內容數組
        }]
      })
    }
  }
}
</script>

<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .inner {
    position: relative;
    width: 50%;
    height: 500px;
    border: 1px solid #eeeeee;
    margin: 100px 50px 0;
    background: url(../../public/static/bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .wrapper .inner .chart {
    width: 400px;
    height: 400px;
    background: url(../../public/static/fill-border.gif) no-repeat center bottom;
    background-size: 80% 80%;
    margin: 10px auto 0;
  }
  .wrapper .inner .btm {
    width: 320px;
    height: 25px;
    background: url(../../public/static/icon-bot.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
</style>