配置echarts的配置项，实现一个好看的折线图模块，可以实现两组数据一个图切换展示

原创

已于 2025-09-17 10:44:25 修改 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript #html5 #vue.js

于 2025-09-17 10:31:05 首次发布

效果：

代码：

 <div class="item">
            <div class="tab_list">
              <div
                style="margin-right: 2%"
                :class="tabChoose == '1' ? 'tab_choose' : 'tab'"
                @click="changeTab('1')"
              >交易1</div>
              <div :class="tabChoose == '2' ? 'tab_choose' : 'tab'" @click="changeTab('2')">交易2</div>
            </div>
            <div class="card_body">
              <div ref="chart" class="chart"></div>
            </div>
          </div>

数据：

//别忘了引入
import * as echarts from 'echarts'

//测试数据

 data() {
    return { chart: null,
             month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
             num: [15, 203, 13, 28, 305, 470, 13, 28, 305, 470],
            }
}

方法：

 watch: {
   
    tabChoose(newVal) {
      if (newVal == '1') {
        this.month = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        this.num = [15, 203, 13, 28, 305, 470, 13, 28, 305, 470]