Echarts绘制图表，折线图、柱状图、饼图

引入echarts
import * as echarts from "echarts";

折线图:

// 绘制折线图
drawLineChart() {
    // 初始化
    let myChart = echarts.init(document.getElementById('line-box'));
    let options = {
        title: {
            subtext: '折线图',
            right: 20,
            top: 40,
        },
        tooltip: {
            confine: true,
        },
        legend: {
            right: 20,
            top: 25,
            color: '#0ff',
            fontSize: 12,
            data: ['年龄'],
            show: true,
        },
        xAxis: [
            {
                type: 'category',
                data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位: 岁',
                min: 0,
                max: 20,
                interval: 2,
            },
            // 第二个y轴
            {
                type: 'value',
                name: '单位: 岁',
                min: 0,
                max: 30,
                interval: 5,
            }
        ],
        series: [
            {
                name: '年龄',
                color: '#0ff',
                type: 'line',
                data: [7, 8, 9, 10, 11, 12],
                // 辅助线
                markLine: {
                    data: [
                        {
                            name: '平均线',
                            type: 'average',
                            yAxis: 10,
                            itemStyle: {
                                color: '#f0f',
                            }
                        }
                    ]
                },
                // 最大值、最小值
                markPoint: {
                    data: [
                        {
                            type: 'max',
                            name: '最大值',
                            itemStyle: {
                                color: '#0f0',
                            }
                        },
                        {
                            type: 'min',
                            name: '最小值',
                            itemStyle: {
                                color: '#0f0',
                            }
                        }
                    ]
                },
            }
        ]
    }
    myChart && myChart.setOption(options);
},

折线图效果:

柱状图:

        // 绘制柱状图
        drawBarChart() {
            // 初始化
            let myChart = echarts.init(document.getElementById('bar-box'));
            let options = {
                title: {
                    subtext: '柱状图',
                    right: 20,
                    top: 40,
                },
                tooltip: {
                    confine: true,
                },
                legend: {
                    right: 20,
                    top: 25,
                    color: '#0ff',
                    fontSize: 12,
                    data: ['年龄'],
                    show: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位: 岁',
                        min: 0,
                        max: 20,
                        interval: 2,
                    },
                    // 第二个y轴
                    {
                        type: 'value',
                        name: '单位: 岁',
                        min: 0,
                        max: 30,
                        interval: 5,
                    }
                ],
                series: [
                    {
                        name: '年龄',
                        color: '#0ff',
                        type: 'bar',
                        data: [7, 8, 9, 10, 11, 12],
                        // 辅助线
                        markLine: {
                            data: [
                                {
                                    name: '平均线',
                                    type: 'average',
                                    yAxis: 10,
                                    itemStyle: {
                                        color: '#f0f',
                                    }
                                }
                            ]
                        },
                        // 最大值、最小值
                        markPoint: {
                            data: [
                                {
                                    type: 'max',
                                    name: '最大值',
                                    itemStyle: {
                                        color: '#0f0',
                                    }
                                },
                                {
                                    type: 'min',
                                    name: '最小值',
                                    itemStyle: {
                                        color: '#0f0',
                                    }
                                }
                            ]
                        },
                    }
                ]
            }
            myChart && myChart.setOption(options);
        },

柱状图效果:

饼图:

// 绘制饼图
        drawPieChart() {
            // 初始化
            let myChart = echarts.init(document.getElementById('pie-box'));
            let options = {
                title: {
                    subtext: '饼图',
                    right: 20,
                    top: 40,
                },
                tooltip: {
                    confine: true,
                },
                legend: {
                    right: 20,
                    top: 25,
                    color: '#0ff',
                    fontSize: 12,
                    show: true,
                },
                series: [
                    {
                        name: '分数',
                        color: ['#0ff', '#f90', '#ff0'],
                        type: 'pie',
                        // 圆环
                        radius: ['50%', '80%'],
                        label: {
                            show: true,
                            formatter: (v) => {
                                return `${v.name}: ${v.value}分`;
                            }
                        },
                        data: [
                            {
                                name: '数学',
                                value: 89,
                            },
                            {
                                name: '语文',
                                value: 76,
                            },
                            {
                                name: '英语',
                                value: 56,
                            }
                        ],
                    }
                ]
            }
            myChart && myChart.setOption(options);
        },

饼图效果:

调用方法:

mounted() {
        this.$nextTick(() => {
            this.drawLineChart();
            this.drawBarChart();
            this.drawPieChart();
        })
    },

dom结构

<div class="echarts-view">
    折线图
    <div id="line-box"></div>
    <hr>
    柱状图
    <div id="bar-box"></div>
    <hr>
    饼图
    <div id="pie-box"></div>
</div>

css
 

#line-box,
#bar-box,
#pie-box {
    width: 100%;
    height: 300px;
}