Vue2怎么用echarts绘制折线图,饼图和大图

栏目分类：前端开发    发布日期：2023-10-01    浏览次数：281次     收藏

本篇内容主要讲解“Vue2怎么用echarts绘制折线图,饼图和大图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue2怎么用echarts绘制折线图,饼图和大图”吧!

chartPan.vue

<template>
    <div>
        <div
            class="chart-header"
            :
        >
            <span class="chart-title">{{ title }}</span>
            <slot name="right" />
        </div>
        <div
            v-if="!isNoData"
        >
            <div
                ref="pie"
                class="echarts"
                :
            />
        </div>
        <div
            v-else
            class="no-data"
        >
            <empty :imagew="160" />
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
export default {
    props: {
        chartType: {
            type: String,
            default: 'pie'
        },
        chartHeight: {
            type: String,
            default: '220px'
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isNoData: false
        };
    },
    methods: {
        pieInit(data, text, subtext, tab = 'node') {
            data = data.filter(i=>+i.value != 0);
            if (data.length < 1) {
                this.isNoData = true;
            } else {
                this.isNoData = false;
            }
            if (this.isNoData) return;
            this.$nextTick(()=>{
                let myChart = echarts.init(this.$refs['pie']);
                myChart.clear();
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        right: '10%',
                        top: tab === 'node' || data.length < 5 ? '22%' : null,
                        itemGap: tab === 'node' ? 17 : 10,
                        itemWidth: 8,
                        icon: 'circle',
                        textStyle: {
                            color: '#666',
                            lineHeight: 25
                        },
                        formatter: (name) => {
                            let tarValue;
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].name == name) {
                                    tarValue = data[i].value;
                                }
                            }
                            return `${name}:  ${tarValue}`;
                        }
                    },
                    title: {
                        show: !!subtext,
                        text: text,
                        textAlign: 'middle',
                        subtext: `${subtext}`,
                        left: '26%',
                        top: '25%',
                        itemGap: 15,
                        textStyle: {
                            fontSize: 14,
                            color: '#666',
                            fontWeight: 400
                        },
                        subtextStyle: {
                            fontSize: 24,
                            color: '#333',
                            fontWeight: 600
                        }
                    },
                    textStyle: {
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },
                        lineHeight: 8,
                        padding: [0, 5, -2, 0]
                    },
                    color: ['#6E99F0', '#47C8A3', '#FAC858', '#FFA660', '#FF8579', '#A3B3D6'],
                    series: [
                        {
                            type: 'pie',
                            minAngle: 25,
                            center: [subtext ? '5%' : '18%', subtext ? '20%' : '45%'],
                            radius: ['75%', '116%'],
                            left: 'center',
                            top: 'center',
                            avoidLabelOverlap: false,
                            labelLine: {
                                show: false
                            },
                            label: {
                                show: false
                            },
                            data
                        }
                    ]
                });
                myChart.resize();
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            });
        },
        lineInit(date, data, subtext = '(%)', tab = 'node') {
            data = data.filter(i=>+i.value != 0);
            if (data.length < 1) {
                this.isNoData = true;
            } else {
                this.isNoData = false;
            }
            if (this.isNoData) return;
            this.$nextTick(()=>{
                let myChart = echarts.init(this.$refs['pie']);
                myChart.clear();
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        position: function(point, params, dom, rect, size) {
                            var x = 0; // x坐标位置
                            var y = 0; // y坐标位置
                            var pointX = point[0];
                            var pointY = point[1];
                            // 提示框大小
                            var boxWidth = size.contentSize[0];
                            var boxHeight = size.contentSize[1];
                            if (boxWidth > pointX) {
                                x = 5;
                            } else { // 左边放的下
                                x = pointX - boxWidth;
                            }
                            if (boxHeight > pointY) {
                                y = 5;
                            } else { // 上边放得下
                                y = pointY - boxHeight;
                            }
                            return [x, y];
                        },
                        formatter: function(params) {
                            let color = params[0].color;
                            let marker = '<span ></span>';
                            let res = params[0].name + '<br/>' + marker + params[0].value + subtext;
                            return res;
                        }
                    },
                    grid: {
                        top: '13%',
                        left: '15%',
                        right: 0,
                        bottom: '20%'
                    },
                    xAxis: {
                        type: 'category',
                        offset: 8,
                        data: date,
                        axisLabel: {
                            color: '#666',
                            formatter: function(value) {
                                return value.substring(value.length - 8);
                            }
                        }
                    },
                    title: {
                        subtext: subtext,
                        subtextStyle: {
                            textAlign: 'right',
                            color: '#666'
                        },
                        // padding: [0, 10],
                        top: 0,
                        left: tab === 'node' ? '5%' : '8%',
                        itemGap: 0
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: false,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            color: '#666'
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: 'rgb(110, 153, 240)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#6E99F0'
                                    },
                                    {
                                        offset: 1,
                                        color: '#ffffff'
                                    }
                                ])
                            },
                            data: data
                        }
                    ]
                });
                myChart.resize();
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            });
        },
        markLineInit(date, data, subtext = '(%)', tab = 'node', limit, request) {
            data = data.filter(i=>+i.value != 0);
            if (data.length < 1) {
                this.isNoData = true;
            }
            if (this.isNoData) return;
            this.$nextTick(()=>{
                let myChart = echarts.init(this.$refs['pie']);
                myChart.clear();
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        position: function(point, params, dom, rect, size) {
                            var x = 0; // x坐标位置
                            var y = 0; // y坐标位置
                            var pointX = point[0];
                 &nbs