vue+echarts 入门饼图和折线图

vue使用echarts参考:https://www.jianshu.com/p/b43b601349e6

<template>
    <div style="display:block;">
        <div ref="bar" :style="{width: '400px', height: '400px'}"></div>
        <div ref="line" :style="{width: '1000px', height: '400px'}"></div>
        <div ref="pie" :style="{width: '400px', height: '400px'}"></div>
    </div>
</template>

<script>
import { success1, warning1, cancel1 } from "@/api/tips.js";
export default {
    data() {
        return {
            color:["#d47a2f","#ec4f4f","#d64747","#8cd647","#119dae","#864fec","#9d5570",],
            echart_option_pie: {},
            echart_option_line: {},
            echart_option_bar: {},
            legend:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        }
    },
    created() {
        this.initOption();
    },
    mounted() {
        this.drawLine();
        this.drawPie();
        this.drawBar();
    },
    methods: {
        initOption() {
            this.echart_option_pie = {
                title: {
                    text: '课程内容分布',
                    left: 'center',
                    top: 30,
                    textStyle: {
                        color: '#333'
                    }
                },
                color:this.color,
                series: [
                    {
                        avoidLabelOverlap: false,
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        ]
                    }
                ]
            }
            this.echart_option_line = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    padding:[20,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: this.legend
                },
                grid: { x: 45, y: 145, x2: 25, y2: 40 },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#119dae'
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(12,102,173,.5)',
                            width: 2,
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value',
                    name: "万元",
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#119dae'
                    },
                    axisLine: {
                        lineStyle: {
                            width: 2,
                            color: '#119dae',
                        }
                    },
                },
                series: []
            }
            this.echart_option_bar = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    padding:[20,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: this.legend
                },
                grid: { x: 45, y: 145, x2: 25, y2: 40 },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#119dae'
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(12,102,173,.5)',
                            width: 2,
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value',
                    name: "万元",
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#119dae'
                    },
                    axisLine: {
                        lineStyle: {
                            width: 2,
                            color: '#119dae',
                        }
                    },
                },
                series: []
            }
        },
        drawBar(){
            var color = ["#119dae","#9d5570","#d64747","#8cd647","#d47a2f","#864fec","#ec4f4f",]
            var echarts = this.$echarts.init(this.$refs['bar'])
            echarts.clear();
            var all_series = [];
            for (var i = 0; i <= 5; i++) {
                var temp = {
                    name: this.legend[i],
                    type: 'bar',
                    lineWidth: 3,
                    symbol: 'circle',
                    symbolSize: '7',
                    itemStyle: {
                        label: { show: true },
                        normal: {
                            color: color[i],
                            lineStyle: {
                                color: color[i]
                            }
                        }
                    },
                    data: [21, 25, 27, 12, 22, 21, 25, 27, 12, 22, 42, 32],
                }
                all_series.push(temp);
            }
            this.echart_option_bar.series = all_series;
            echarts.setOption(this.echart_option_bar, true);
        },
        drawLine() {
            var color = ["#119dae","#9d5570","#d64747","#8cd647","#d47a2f","#864fec","#ec4f4f",]
            var echarts = this.$echarts.init(this.$refs['line'])
            echarts.clear();
            var all_series = [];
            for (var i = 0; i <= 5; i++) {
                var temp = {
                    name: this.legend[i],
                    type: 'line',
                    lineWidth: 3,
                    symbol: 'circle',
                    symbolSize: '7',
                    itemStyle: {
                        label: { show: true },
                        normal: {
                            color: color[i],
                            lineStyle: {
                                color: color[i]
                            }
                        }
                    },
                    data: [21, 25, 27, 12, 22, 21, 25, 27, 12, 22, 42, 32],
                }
                all_series.push(temp);
            }
            this.echart_option_line.series = all_series;
            echarts.setOption(this.echart_option_line, true);
        },
        drawPie() {
            var echarts = this.$echarts.init(this.$refs['pie'])
            echarts.clear();
            this.echart_option_pie.series[0].data = [
                { value: 30, name: '前十大客户\n30%' },
                { value: 70, name: '其他客户\n70%' },
            ]
            echarts.setOption(this.echart_option_pie, true);
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}
/* .a{
    color:   #ec4f4f
} */
</style>