eCharts在一个页面上画多张图

最新推荐文章于 2024-04-08 09:38:53 发布

车马去闲闲丶

最新推荐文章于 2024-04-08 09:38:53 发布

阅读量1.8k

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44882744/article/details/135412003

版权

文章详细描述了如何在Vue组件中利用eCharts库在同一页面上创建并展示两张独立的折线图，包括图表的初始化、数据配置和样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eCharts在一个页面上画多张图

以下为两张折线图为例

<template>
//第一个折线图 引用 chart
    <div ref="chart" style="width: 100%; height: 400px;"></div>
//第二个折线图 引用 myChart
    <div ref="myChart" style="width: 100%; height: 400px;"></div>

</template>
<script>
import * as echarts from 'echarts';
// 在组件中获取传递的参数  
export default {
    data() {
        return {
           //定义不定义都可以
            myChart: null,
        }
    },
    methods: {
    //第一个折线图
        drawChart() {
         //初始化图表
            const chart = echarts.init(this.$refs.chart);
            const option = {
                title: { text: '图表名字1' },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                xAxis: { type: 'category', data:[1,2,3,4,5,6]},
                yAxis: { type: 'value' },
                series: [{name: '折线图线的名字', type: 'line', smooth: true, step: 'end', data: [1,2,3,4,5,6] ,
                itemStyle: {
                    normal: {
                        color: '#B22222', //改变折线点的颜色
                        lineStyle: {
                            color: '#B22222' //改变折线颜色
                        }
                    }
			    }}],
            };
           //设置图表属性
            chart.setOption(option);
        },
          //第二个折线图
        seatsChart() {
        //初始化图表
            const myChart = echarts.init(this.$refs.myChart);
            const option = {
                title: { text: '图表名字2' },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                xAxis: { type: 'category', data: [1,2,3,4,5,6]},
                yAxis: { type: 'value' },
                series: [{ name: '折线图线的名字',type: 'line', smooth: true, step: 'end', data: [1,2,3,4,5,6],
                itemStyle: {
                    normal: {
                        color: '#008000', //改变折线点的颜色
                        lineStyle: {
                            color: '#008000' //改变折线颜色
                        }
                    }
			    }
             }],
            };
            //设置图表属性
            myChart.setOption(option);
        },
    },
  
    mounted() {
            this.drawChart();
            this.seatsChart();
        });
    },
}


</script>
<style></style>