vue项目中创建一个折线图

最新推荐文章于 2024-03-16 16:21:42 发布

梦樱花儿

最新推荐文章于 2024-03-16 16:21:42 发布

阅读量659

点赞数 1

文章标签： vue.js echarts css

本文链接：https://blog.csdn.net/qq_51403084/article/details/121553193

版权

本文介绍如何在Vue项目中集成ECharts库，创建一个动态更新的折线图。首先，通过npm安装vue-echarts，并在组件中引入。接着，配置ECharts选项，设置折线图的x轴、y轴数据，以及动态数据更新的逻辑。最后，使用CSS调整图表样式，使其适应页面布局。

摘要由CSDN通过智能技术生成

<template>

<div id="mainLine" style="width: 100%;height: 300px;"></div>
</template>

<script>

import echarts from 'echarts'
export default {

data(){

return{

Linecharts: '',
opinionData: ["2000", "3000", "10000", "6000", "5000"],
}

}

methods:{

drawLine(id) {
  this.Linecharts = echarts.init(document.getElementById(id))
  this.Linecharts.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '9%',
      top:'3%',
      containLabel: true
    },

    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ["00:00","03:00","06:00"