Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use vue-cli3+echarts to achieve gradual color dashboard component encapsulation", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to use vue-cli3+echarts to achieve gradual color dashboard component encapsulation"!

Effect preview

Train of thought

1. Use the superposition of two dashboards with the same starting angle, and the end angle of the bottom dashboard is fixed.

2. Input data through props

3. Calculate the end angle of the upper dashboard and assign a value

Code

Data share {{this.gaugeData.gaugeTitle}} import echarts from "echarts" Export default {name: "gauge", props: ["gaugeData"], / / incoming data data () {return {bottomOption: {series: [{name: ", type:" gauge ", startAngle:" 225 ", endAngle:"-45 ", data: [{value: 100 Name: ""}], splitNumber: 10, detail: {show: false,}, splitLine: {show: false,}, pointer: {show: false,}, axisTick: {show: false }, axisLabel: {show: false}, axisLine: {lineStyle: {width: 10, color: [1, new echarts.graphic.LinearGradient (0,0,1,0) [{offset: 0, / / starting color color: "# 707089",}, {offset: 1 / / end color color: "# 707089",},]),],],},],} TopOption: {series: [{name: "Business indicators", type: "gauge", startAngle: "225", endAngle: "", detail: {formatter: "{value}%", color: "# 01F9FF", fontSize: 18 FontFamily: "ZhenyanGB-Regular", offsetCenter: [0,0],}, data: [{value: ", name:"}], splitNumber: 10, splitLine: {show: false,}, pointer: {show: false }, axisTick: {show: false,}, axisLabel: {show: false}, axisLine: {lineStyle: {width: 10, color: ",},] },} }, mounted () {this.getTopGauge (); this.getBottomGauge ();}, methods: {getTopGauge () {const chart = this.$refs.topGauge; if (chart) {const myChart = this.$echarts.init (chart, null, {renderer: "svg"}); this.$once ("hook:beforeDestroy", function () {echarts.dispose (myChart);}) This.topOption.series [0] .data [0] .value = this.gaugeData.gaugePercent; this.topOption.series [0] .axisLine.lineStyle.color = this.gaugeData.guageColor; let tmp = 225270 * (this.gaugeData.gaugePercent / 100); this.topOption.series [0] .endAngle = tmp; const option = this.topOption; myChart.setOption (option) }, getBottomGauge () {const chart = this.$refs.bottomGauge; if (chart) {const myChart = this.$echarts.init (chart, null, {renderer: "svg"}); this.$once ("hook:beforeDestroy", function () {echarts.dispose (myChart);}); const option = this.bottomOption; myChart.setOption (option) },},}; .gauge {width: 150px; height: 165px; position: relative; & _ _ top {position: absolute; top: 0; left: 0; width: 100%; height: 150px; & _ _ bottom {position: absolute; top: 0; left: 0; width: 100%; height: 150px;} & _ label {position: absolute; height: 21px Width: 64px; background: # 0547c9; border: 1px solid # 1e92ff; border-radius: 11.5px; border-radius: 11.5px; bottom: 35px; left: 50%; transform: translate (- 50%, 0); font-family: PingFangSC-Regular; font-size: 8px; color: # ffffff; text-align: center; line-height: 21px;} & _ title {font-family: PingFangSC-Medium Font-size: 14px; color: # 52f9cb; text-align: center; position: absolute; bottom: 5px; left: 50%; transform: translate (- 50%, 0);}} so far, I believe you have a better understanding of "how to use vue-cli3+echarts to achieve gradual color dashboard component encapsulation". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.