【vue3/echarts】vue3中使用echarts/饼图/双轴双数据柱状图

最新推荐文章于 2024-01-12 16:03:42 发布

Cc_Debugger

最新推荐文章于 2024-01-12 16:03:42 发布

阅读量429

点赞数

分类专栏： echarts（大屏可视化） vue3 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/134273390

版权

echarts（大屏可视化）同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

npm下载echarts

引入使用

<script>
import Box from "@/components/box.vue";
import { onMounted } from 'vue';
import { init } from 'echarts';
export default {
    components: {
        Box: Box
    },
    setup() {

        onMounted(() => {
        // 饼图
            const charEle = document.getElementById('echarts1');
            const charEch = init(charEle);
            const colorList = ['#2FD7D7 ', '#83F767', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#ff0000']
            const option = {
               
                tooltip: {
                    show: true,
                    trigger: 'item',
                    backgroundColor: 'transparent',
                    borderColor: '#2FD7D7',
                    textStyle: {
                        color: '#fff'
                    }
                },
               
                color: colorList,
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: [65, 90],
                        center: ['48%', '49%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            borderWidth: 13,
                            borderColor: '#112841'
                        },
                        data: [
                            { name: '编号1 200米', value: 200 },
                            { name: '编号2 200米', value: 20 },
                        ],
                    }
                ]
            };
            charEch.setOption(option);


            const charEle2 = document.getElementById('echarts2');
            const charEch2 = init(charEle2);
            var xData = ['1月', '2月', '3月', '4月', '5月', '6月'];
            var moneyData = [118.0, 123.2, 125.6, 176.7, 115.6, 162.2];
            var numData = [120.1, 128.1, 120.1, 120.1, 128.1, 128.1];
            const option2 = {
                tooltip: {
                    // show: false,
                    trigger: 'axis',
                    backgroundColor: '#112841',
                    borderColor: '#2FD7D7',
                    textStyle: {
                        color: '#fff'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                },
                grid: {
                    top: 50
                },
                legend: {
                    data: ['数据1',
                        '数据2'],
                    top: '20',
                    itemWidth: 6,
                    itemHeight: 6,
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisPointer: {
                        type: 'shadow',
                    },
                    axisLabel: {
                        formatter: '{value} ',
                        color: '#fff'
                    },
                },
                ],
                yAxis: [{
                    type: 'value',
                    name: '',
                    min: 0,
                    max: 250,
                    interval: 50,
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#fff",
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ',
                        color: '#fff'
                    },
                },
                // y右侧轴
                    // {
                    //     type: 'value',
                    //     name: '',
                    //     min: 0,
                    //     max: 25,
                    //     interval: 5,
                    //     axisLabel: {
                    //         formatter: '{value} ',
                    //     },
                    // },
                ],
                series: [{
                    name: '数据1',
                    type: 'bar',
                    data: moneyData,
                    color: '#1FEBC0',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '';
                        },
                    },
                    // 柱体上方显示数值
                    label: {
                        show: false,
                        position: 'top',
                    },
                    barWidth: 10
                },
                {
                    name: '数据2',
                    type: 'bar',
                    data: numData,
                    color: '#81F466',
                    // 柱体上方显示数值
                    label: {
                        show: false,
                        position: 'top',
                    },
                    barWidth: 10

                },
                ],
            };
            charEch2.setOption(option2);
        });


        return {}
    },
}
</script>