Echarts:水球图（需要外部再引入脚本）

Posted 2023-05-01

参考技术A 水球图，圆形状态，显示相关信息。

1. https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js
2. https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js

vue按需引入/全局引入echarts

npm install echarts -S

　　

1.按需引入

新建echarts.js公共引入

// 文件路径 @/lib/echarts.js 自行配置
 
 // 加载echarts，注意引入文件的路径
 import echarts from ‘echarts/lib/echarts‘
 
 // 再引入你需要使用的图表类型，标题，提示信息等
 import ‘echarts/lib/chart/bar‘
 import ‘echarts/lib/component/legend‘
 import ‘echarts/lib/component/title‘
 import ‘echarts/lib/component/tooltip‘
 
 export default echarts

　　在echart.vue文件引入echarts.js文件

<template>
  <div class="about">
    <!-- <h2>This is an aboutEchart page</h2> -->
    <div id="myChart" ref="myChart"></div>     
  </div>
</template>
<script>
import echarts from ‘@/common/echarts‘

2.全局引入echarts

　

在main.js中

// 引入echarts
import echarts from ‘echarts‘
Vue.prototype.$echarts = echarts