Vue+ECharts 实现折线图

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

素旧丶

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

阅读量329

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/m0_58743687/article/details/123204941

版权

本文详细介绍了如何结合Vue.js框架与ECharts库，实现动态数据的折线图展示。从安装ECharts到配置Vue组件，一步步解析绘制折线图的关键步骤，包括数据绑定、事件监听和选项设置等核心知识点。

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

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main3" style="width: 700px;height: 400px;"></div>
</template>
<script>
  import * as echarts from 'echarts'
  export default {
    name: 'Fsclzxt',
    props: {
      //上级传入
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        // list:null,//数据
        xMax: 0,//X轴最大值
        xInterval: 10,//X轴刻度间隔
        yMax: 0,//y轴最大值
        yInterval: 10,//y轴刻度间隔
        sdata: [],//显示数据
        tdata: [],//临时数据
      }
    },
    methods: {
      drawPie(id) {


        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          xAxis: {
            name: "风速(m/s)",
            max: this.xMax,//x轴最大值
            interval: this.xInterval,//x轴刻度大小

            // nameLocation:"",//轴名称位置
            splitLine: {   //坐标轴内竖线

最低0.47元/天解锁文章