echarts 使用

<template>
    <div>
        <div id="myChart" style="width: 1000px;height: 400px;" class="my-modal-parent"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "echart",
        props: ["tm", "jd", "jhs", "dd"],
        data() {
            return {
                // option将要设置以下字段感觉就足够使用了
                option: {
                    grid: {
                        x: 50,  // 左侧
                        y: 70, // 上侧
                        x2: 150,  // 右侧
                        y2: 50,  // 下侧
                    }
                    ,
                    legend: {
                        data: ['字段', '字段', '字段', '字段'],
                        orient: 'vertical', //纵向显示
                        right: 15,
                        top: 45,
                        backgroundColor: '#eee',
                        padding: 10
                    },
                    xAxis: {
                        type: 'category',   // 还有其他的type，可以去官网喵两眼哦
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],   // x轴数据
                        name: '销量(高->低)',   // x轴名称
                        // x轴名称样式
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18
                        },
                        axisLine: {
                            symbol: ['none', 'arrow']
                        },

                    },
                    yAxis: {
                        type: 'value',
                        name: '价格',   // y轴名称
                        // y轴名称样式
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18
                        },
                        axisLine: {
                            symbol: ['none', 'arrow']
                        },
                    },
                    title: {
                        text: '销量价格关系表(仅供参考)',
                        textStyle: {
                            color: '#666',  //标题字体颜色
                            fontSize: 22    //标题字体大小
                        },
                        show: true,
                        x: 'center'     //水平居中
                    },
                    tooltip: {
                        trigger: 'axis'   // axis   item   none三个值
                    },
                    series: [
                        {
                            name: '字段',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#00FF00',
                                    lineStyle: {
                                        color: '#00FF00'
                                    }
                                }
                            },
                        },
                        {
                            name: '字段',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                color: '#1deaea',
                                lineStyle: {
                                    color: '#1deaea'
                                }
                            }
                        },
                        {
                            name: '字段',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                color: '#d9d913',
                                lineStyle: {
                                    color: '#d9d913'
                                }
                            }
                        },
                        {
                            name: '字段',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                color: '#ff0000',
                                lineStyle: {
                                    color: '#ff0000'
                                }
                            }
                        }
                    ],
                },
            }
        },
        mounted() {
            let myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption(this.option);
            let ary0 = Array();
            let ary1 = Array();
            let ary2 = Array();
            let ary3 = Array();
            if (this.tm.length != 0) {
                for (let i = 0; i < this.tm.length; i++) {
                    ary0.push(parseInt(this.tm[i].price))
                }
            }
            if (this.jd.length != 0) {
                for (let i = 0; i < this.jd.length; i++) {
                    ary1.push(parseInt(this.jd[i].price))
                }
            }
            if (this.jhs.length != 0) {
                for (let i = 0; i < this.jhs.length; i++) {
                    ary2.push(parseInt(this.jhs[i].price))
                }
            }
            if (this.dd.length != 0) {
                for (let i = 0; i < this.dd.length; i++) {
                    ary3.push(parseInt(this.dd[i].price))
                }
            }
            console.log(this.option.series);
            this.option.series[0].data = ary0;
            this.option.series[1].data = ary1;
            this.option.series[2].data = ary2;
            this.option.series[3].data = ary3;
            console.log(this.option.series);
            myChart.setOption(this.option);
        }
    }
</script>
<style scoped>
</style>