标签：__ textStyle Vue const Observer type xData data echarts

在Vue+Echarts做表中遇到一个问题，__ob__: Observer无法展示数据，

在这之前推荐一篇文章看一下，个人觉得挺不错的。

文章链接：

                  https://blog.csdn.net/weixin_38345306/article/details/123090611

话不多说，咱们上代码。

<template>
  <div class="ThecondChart">
    <div class="main" ref="myChart"></div>
    <!--    {{ this.TotalData.tableData}}-->
  </div>
</template>

<script>
import * as echarts from 'echarts'  
import { GetRollData } from '@/api/commonApi'

require('echarts/theme/macarons') // echarts theme    echarts主题皮肤
export default {
  name: 'Chart02',
  props: ['lineCity'],
  data() {
    return {
      xData: [],
      yData: [],
      TotalData: {
        tableData: [],
        curveData: []
      },
    }
  },
  watch: {
    xData: {
      deep: true,
      handler(newValue) {
        // console.log(newValue)
        this.ShowChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.GetChartData()
    })
  },
  methods: {
    GetChartData() {
      const tD = []
      const cD = []
      const that = this
      GetRollData({ city: this.lineCity }).then(res => {
        this.xData = res.data.curveData[0].linex
        this.yData = res.data.curveData[0].liney
      })
    },
    ShowChart() {
      const myChart = echarts.init(this.$refs.myChart, 'macarons')// macarons主题皮肤
      const option = {
        title: {
          text: '折线图',
          subtext: '副标题'
        },
        tooltip: {
          backgroundColor: 'pink'
        },
        legend: {
          textStyle: { color: '#ffffff' }
        },
        xAxis: {
          type: 'category',
          // 数据
          data: this.xData,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              width: 1, // 线的大小
              type: 'solid'// 轴线的类型
            },
            onZero: false
          },
          axisLabel: { // 文字倾斜
            rotate: 80,
            textStyle: {
              fontSize: 12,
              fontWeight: 'bold'
            }
            // 坐标轴刻度标签的相关设置。
            // interval: 0,
          }
        },
        yAxis: {
          name: '温度(℃)',
          nameTextStyle: {
            fontSize: 14,
            padding: [10, 10, 10, 10],
            fontWeight: 'bold'
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              width: 1, // 线的大小
              type: 'solid'// 轴线的类型
            },
            onZero: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              fontWeight: 'bold'
            },
            // 坐标轴刻度标签的相关设置。
            interval: 0
          },
          splitArea: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'slider',
            height: 20,
            xAxisIndex: 0,
            filterMode: 'none',
            textStyle: { color: '#ffffff' }
          },
          {
            type: 'inside',
            xAxisIndex: 0,
            height: 20,
            filterMode: 'none',
            textStyle: { color: '#ffffff' }
          }
        ],
        series: {
          name: '逐时温度(℃)',
          type: 'line',
          data: this.yData,
          emphasis: {
            focus: 'series' // 聚焦当前的区域高亮
          }
        }
      }
      // 设置自适应（拖拽的曲线最好不要设置）
      window.addEventListener('resize', () => {
        if (this.chart !== null) {
          this.chart.resize()
        }
      })
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  border: #00ff9d 1px solid;
}
</style>

在这里我是用监视属性解决的这个问题。

下面我们拆分一下代码，详细解读一下，其实也很简单。

引入echarts，新版本引入写法。

主题皮肤

在后端接口获取数据。将x轴和y轴的数据赋值给data中的两个空数组分别为xData和yData。

创建图表，引入主题皮肤，option内为配置项。

 监视属性(watch)，开启深度监视，监视xData数组的数据变化，创建图表。

 这样就可以正常展示图表数据了。

标签：__,textStyle,Vue,const,Observer,type,xData,data,echarts
来源： https://www.cnblogs.com/reverse-x/p/16646870.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。