[JavaScript知识库]echarts散点图（线性回归）

echarts散点图（线性回归）

备注：线性回归是利用数理统计中回归分析，说白了就是根据你的数据算出一个方程式，然后在图中用一条线展示出来

echarts得版本必须是5.0或以上的

npm install echarts -S
npm install echarts-stat -S

//main.js
import Vue from 'vue'
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

<div class="charts" ref="chart"></div>

import * as ecStat from 'echarts-stat';
export default {
  data() {
    return {
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      this.$echarts.registerTransform(ecStat.transform.regression);
      // 基于准备好的dom，初始化echarts实例
      //light是用来改变展示的颜色
      var myChart = this.$echarts.init(this.$refs.chart, "light");
      var option = {
        dataset: [
          {
            source: [
              [1, 4862.4],
              [2, 5294.7],
              [3, 5934.5],
              [4, 7171.0],
              [5, 8964.4],
              [6, 10202.2],
              [7, 11962.5],
              [8, 14928.3],
              [9, 16909.2],
              [10, 18547.9],
              [11, 21617.8],
              [12, 26638.1],
              [13, 34634.4],
              [14, 46759.4],
              [15, 58478.1],
              [16, 67884.6],
              [17, 74462.6],
              [18, 79395.7],
            ],
          },
          {
            transform: {
              type: "ecStat:regression"
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "scatter",
            type: "scatter",
            datasetIndex: 0,
          },
          {
            name: "line",
            type: "line",
            smooth: true,
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: "circle",
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 },
          },
        ],
      };
      // 使用指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};

以上就能显示出散点图了，下面来看看我遇到的问题

报错一

[Vue warn]: Error in mounted hook: “TypeError: data.count is not a function”
TypeError: data.count is not a function

1.这个是因为echarts版本问题（因为我的echarts版本是4.9.0，官方要求是5.0及以上的版本，然后我把版本改成5.1.0就好了）
2.版本改好后还是报这个错，那你就需要 npm install echarts-stat -S

报错二

Error in mounted hook: "TypeError: this.$echarts.registerTransformisnotafunction"TypeError:this.$echarts.registerTransform is not a function

这个是因为echarts版本问题（因为我的echarts版本是4.9.0，官方要求是5.0及以上的版本，然后我把版本改成5.1.0就好了）

this.$echarts.registerTransform(ecStat.transform.regression);

报错三

[Vue warn]: Error in mounted hook: “ReferenceError: ecStat is not defined”
ReferenceError: ecStat is not defined

这个是因为没有引入echarts-stat

import * as ecStat from 'echarts-stat';

报错四

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘registerTransform’ of undefined”
TypeError: Cannot read property ‘registerTransform’ of undefined

这个是因为引入echarts的问题

import * as echarts from 'echarts';