当前位置: 首页 > Web前端 > vue.js

Echarts实现梯度矩形水球图

时间:2023-04-01 00:19:17 vue.js

1.下载echarts和echarts-liquidfillnpminstallecharts--savenpminstallecharts-liquidfill2。main.jsimport*asechartsfrom'echarts'import'echarts-liquidfill'Vue.prototype.$echarts=echarts3.html

4.css.chart-box{宽度:45px;高度:120px;位置:相对;左:50%;顶部:50%;转换:翻译(-50%,-50%);背景色:#061633;.liquidFill{宽度:100%;高度:100%;}}5。jsexportdefault{mounted(){this.draw(0.6)},methods:{draw(data){constchart=this.$echarts.init(this.$refs.liquidFill)constdataOption={value:data,itemStyle:{color:newthis.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(128,255,165)'},{offset:1,color:'rgba(1,191,236)'}])}}constoption={series:[{type:'liquidFill',shape:'rect',radius:120,amplitude:'8%',//振幅数据:[dataOption,dataOption],backgroundStyle:{color:'rgba(255,255,255,0)'},outline:{show:false},label:{normal:{show:false,formatter:''}}}]}chart.setOption(option)}}6.最终实施效果