echarts中水球图插件的使用

最新推荐文章于 2024-08-08 07:52:19 发布

Loving&Living

最新推荐文章于 2024-08-08 07:52:19 发布

阅读量1.1k

点赞数

分类专栏： Vue Echarts

本文链接：https://blog.csdn.net/weixin_44944943/article/details/113444012

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Echarts

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ECharts中使用液体填充图插件，并分享了遇到的错误解决方案，包括升级echarts到v4.9.0-S版本和引入echarts-liquidfill@2.0.6来实现预期的水球效果。

摘要由CSDN通过智能技术生成

echarts中水球图插件的使用

过程中的注意点：

1.报错："export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

解决：echarts版本不行，下载 npm i echarts@4.9.0 -S

2.没有水球效果

解决：下载这个版本 npm i echarts-liquidfill@2.0.6

<template>
    <div class="waveChart">
        <div class="chart" ref="SimpleChart" style="height:200px"></div>
    </div>
</template>
<script>
import echarts from "echarts";
import "echarts-liquidfill";

export default {
    name: "WaveChart",
    methods: {
        
        initChart() {
            //初始化图表
            let myChart = echarts.init(this.$refs.SimpleChart);
            let option = {
                title: {
                    text: "水球图",
                    textStyle: {
                        fontSize: 12,
                        // fontWeight: "bold",
                        color: "#FEFEFE",
                    },
                    x: "center",
                    y: "65%",
                },
                series: [
                    {
                        type: "liquidFill",
                        radius: "77%",
                        center: ["50%", "50%"],
                        data: [0.5,0.5],
                        backgroundStyle: {
                            borderWidth: 6,
                            borderColor: "rgba(17, 24, 48, 0.8)",
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: "#000" },
                                { offset: 1, color: "rgba(17, 24, 48, 0.6)" },
                            ]),
                        },
                        outline: {
                            show: false,
                        },
                        color: [
                            new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: "#2475FD" },
                                { offset: 1, color: "#46B3FF" },
                            ]),
                            new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: "#2475FD" },
                                { offset: 1, color: "#46B3FF" },
                            ]),
                        ],
                        label: {
                            normal: {
                                position: "top",
                                distance: -45,
                                fontSize: 20,
                                z: 10,
                                color: "#259DFF",
                                
                            },
                        },
                    },
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: ["77%", "80%"],
                        hoverAnimation: false,
                        data: [
                            {
                                name: "",
                                value: 500,
                                labelLine: {
                                    show: false,
                                },
                                itemStyle: {
                                    color: "#2475FD",
                                },
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        },
    },  
    mounted() {
        this.initChart();
    },
    
};
</script>
<style  scoped>
.waveChart {
    width: 100%;
    position: relative;
}
 .chart {
        width: 100%;
        height: 100%;
    }
</style>