vue 项目 使用 echarts 折线图

1 篇文章 0 订阅

先来张效果图

安装echarts依赖

npm install echarts -save

在main.js中全局引入

import echarts from "echarts"; 

Vue.prototype.$echarts = echarts

在页面中使用

html 代码:

<template>
  <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
</template>

js 代码:

首先引入 echarts 

import echarts from 'echarts'

然后在data中定义五个数组(可替换成后端返回的数据):

      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴数据,可根据需求

      yAxisData1: [120, 132, 101, 134, 90, 230, 210], // y轴数据1

      yAxisData2: [220, 182, 191, 234, 290, 330, 310], // y轴数据2

      yAxisData3: [150, 232, 201, 154, 190, 330, 410], // y轴数据3

      yAxisData4: [320, 332, 301, 334, 390, 330, 320], // y轴数据4

      yAxisData5: [820, 932, 901, 934, 1290, 1330, 1320], // y轴数据5

最终代码

<template>
  <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'xwPassengerFlow',
  data() {
    return {
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴数据,可根据需求
      yAxisData1: [120, 132, 101, 134, 90, 230, 210], // 数据1
      yAxisData2: [220, 182, 191, 234, 290, 330, 310], // 数据2
      yAxisData3: [150, 232, 201, 154, 190, 330, 410], // 数据3
      yAxisData4: [320, 332, 301, 334, 390, 330, 320], // 数据4
      yAxisData5: [820, 932, 901, 934, 1290, 1330, 1320], // 数据5
      
    }
  },
  mounted() {
    this.loadLine();
  },
  methods: {
    loadLine() {
      let option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData // x轴数据
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: this.yAxisData1 // y轴数据1
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: this.yAxisData2 // y轴数据2
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: this.yAxisData3 // y轴数据3
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: this.yAxisData4 // y轴数据5
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: this.yAxisData5 // y轴数据5
          }
        ]
      }
      this.myChartOne = echarts.init(document.getElementById('myChart'))
      this.myChartOne.setOption(option)
    },
  }
}
</script>

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在前端引入 ECharts 的库文件,可以通过 CDN 引入,也可以下载到本地引入。然后,你需要在 Vue 组件中引入 ECharts,并在 mounted 钩子函数中初始化图表。 下面是一个简单的示例代码: ```html <template> <div class="chart-container"> <div ref="chart" class="chart"></div> </div> </template> <script> import echarts from 'echarts' export default { name: 'LineChart', data() { return { chartData: { xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], yData: [820, 932, 901, 934, 1290, 1330, 1320] } } }, mounted() { const chart = echarts.init(this.$refs.chart) chart.setOption({ xAxis: { type: 'category', data: this.chartData.xData }, yAxis: { type: 'value' }, series: [{ data: this.chartData.yData, type: 'line' }] }) } } </script> <style scoped> .chart-container { width: 100%; height: 300px; } .chart { width: 100%; height: 100%; } </style> ``` 这个示例代码用到了一个 LineChart 组件,其中 data() 函数中定义了图表的数据,mounted 钩子函数中初始化了图表,并设置了 x 轴、y 轴和数据系列。在模板中,我们使用 ref 属性来引用图表容器,然后在 mounted 钩子函数中初始化图表。注意,这里使用了 $refs 对象来获取 DOM 元素。 当你使用这个组件时,只需要将数据传递给它即可: ```html <template> <div> <line-chart :chartData="chartData"></line-chart> </div> </template> <script> import LineChart from './LineChart' export default { name: 'App', data() { return { chartData: { xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], yData: [820, 932, 901, 934, 1290, 1330, 1320] } } }, components: { LineChart } } </script> ``` 这样,你就可以在你的 Spring Boot + Vue 项目使用 ECharts 折线图了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值