关于#vue.js#的问题：echarts

img

代码如下：

import "echarts/lib/chart/line"; // 引入需要使用的图表类型
import "echarts/lib/component/title"; // 引入需要使用的组件
import "echarts/lib/component/tooltip";
import axios from "axios";
import * as echarts from "echarts";

function getDatesInRange(startDate, endDate) {
  const dates = [];
  const current = new Date(startDate);

  while (current <= endDate) {
    dates.push(current.toLocaleDateString("zh-CN"));
    current.setDate(current.getDate() + 1);
  }

  return dates;
}

export default {
  data() {
    return {
      host: "http://127.0.0.1:5000",
      loading: false,
      data_list: [], // 总数据列表
      value: "", // 下拉列表的值
      options: [
        // 下拉列表数据
        {
          value: "day",
          label: "白天",
        },
        {
          value: "night",
          label: "夜晚",
        },
      ],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },
  mounted() {
    this.initializeChart();
    this.cbtn();
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    initializeChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);

      myChart.showLoading();

      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "E_value",
            "W1_value",
            "W2_value",
            "T_value",
            "ec",
            "wc",
            "temperature",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [], // 初始为空
        },

        yAxis: {
          type: 'value',
          scale: true,
        },

        series: [
          {
            name: "E_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "W1_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "W2_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "T_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "ec",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "wc",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "temperature",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
        ],
      };

      myChart.hideLoading();
      option && myChart.setOption(option);
    },
    cbtn() {
      const params = {
        day: this.value,
        start_time: this.formatDate(this.value2[0]),
        end_time: this.formatDate(this.value2[1]),
      };
      axios
        .get(this.host + "/device/soil_mean", { params })
        .then((response) => {
          if (this.data_list.length === 0) {
            //   // 数据为空，弹出提示框
            //   this.$message({
            //     message: "好像这几天没数据呢",
            //     type: "warning",
            //   });
            // } else {
            //   // 查询成功，弹出提示框
            //   this.$message({
            //     message: "查询成功",
            //     type: "success",
            //   });
            // 更新数据列表
            this.data_list = response.data.data || []; // 如果数据不存在，则设置为空数组
            // 渲染图表
            this.updateChart();
            console.log(this.data_list);
            console.log(params);
          }
        });
    },
    updateChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.getInstanceByDom(chartDom);

      const startDate = new Date(this.value2[0]);
      const endDate = new Date(this.value2[1]);
      const xAxisData = getDatesInRange(startDate, endDate);

      const seriesData = [
        "temperature",
        "E_value",
        "T_value",
        "W1_value",
        "W2_value",
        "ec",
        "wc",
      ].map((name) => ({
        name,
        type: "line",
        stack: "Total",
        data: this.data_list.map((item) => item[name]),
      }));

      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
        },
        series: seriesData,
      };

      option && myChart.setOption(option);
    },
  },
};
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7426394
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue.js实战案例(1)：外部直接引入渲染echarts地图的实战案例
  • 除此之外, 这篇博客: Vue.js+ECharts：图表缩放中的 代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div style="width: 600px;height:400px;"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  data() {
    return {
      // 指定图表的配置项和数据
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['销量', '库存量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        toolbox: { // 工具箱
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['bar', 'line']},
            restore: {}
          }
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 10
        }, {
          start: 0,
          end: 10,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        series: [{
          name: '销量',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [20, 20, 36, 10, 10, 20],
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        },
        {
          name: '库存量',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [10, 30, 20, 5, 5, 10],
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() { // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
      this.chart = echarts.init(this.$el, 'macarons')
      // this.chart = echarts.init(this.$el)

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option)
    }
  }
}
</script>
  • 您还可以看一下 jason老师的vue通用后台管理课程中的 echarts表格柱状图实现小节, 巩固相关知识点