echarts之水球图与响应式

echarts之水球图与响应式

code.vue

                <div class="wrapper"><div class="inner"><divid="machineWaterPoloChart"class="chart"/></div></div>import echarts from 'echarts';
import 'echarts-liquidfill';spaceArr: {A: { value: '5%', label: 'A类备份', color: '#F0606F' },B: { value: '5%', label: 'B类备份', color: '#FF8B2E' },C: { value: '10%', label: 'C类备份', color: '#F6BD16' },D: { value: '5%', label: 'D类备份', color: '#5AD8A6' },other: { value: '10%', label: '其他', color: '#5D7092' }},chartData: [0.65],chart: nullactivated() {this.initChart();this.setOption();},deactivated() {// 清除画布this.chart.dispose();this.chart = null;},methods: {initChart() {this.chart = echarts.init(document.getElementById('machineWaterPoloChart'));window.addEventListener('resize',throttle(()=>{this.chart ? this.chart.resize() : '';}, 500));},setOption() {this.chart.clear();this.chart.setOption({// 提示框组件tooltip: {trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。textStyle: {color: '#fff' // 文字颜色},// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式formatter: function(value) {return value.seriesName + ': ' + (value.data * 100).toFixed(0) + '%';}},series: [{type: 'liquidFill',name: '剩余空间', // 系列名称，用于tooltip的显示，legend 的图例筛选radius: '62%', // 水球图的半径center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标// 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形// diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的pathshape: 'circle',phase: 0, // 波的相位弧度 不设置  默认自动direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右outline: {show: true,borderDistance: 0, // 边框线与图表的距离 数字itemStyle: {opacity: 1, // 边框的透明度   默认为 1borderWidth: 1, // 边框的宽度shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影shadowColor: '#fff', // 边框的阴影颜色,borderColor: '#5B8FF9' // 边框颜色}},// 图形样式itemStyle: {color: '#5B8FF9', // 水球显示的背景颜色opacity: 0.5, // 波浪的透明度shadowBlur: 10 // 波浪的阴影范围},backgroundStyle: {color: '#fff', // 水球未到的背景颜色 407bf3opacity: 0.5},// 图形的高亮样式emphasis: {itemStyle: {opacity: 0.8 // 鼠标经过波浪颜色的透明度}},// 图形上的文本标签label: {normal: {formatter: function(data) {// console.log('data', data);let b = (data.data * 100).toFixed(0) + '%';return `{name|${data.seriesName}}\n{value|${b}}`;},rich: {name: {fontSize: 10,color: '#4B535E'},value: {fontSize: 22,color: '#333',padding: [0, 0, 5, 0],fontWeight: 600}}}},data: this.chartData // 系列中的数据内容数组}]});}}

效果