小白的博客

  • 通过Vue操作echarts
  • 1.首先创建一个容器
  • 2.导入echarts
  • 3.在钩子(methods())中定义函数
  • 在钩子中调用 函数
  • 完整的代码为
  • 运行后的结果如下
  • 首页
  • 友情链接
  • BiliBili
  • 下载站
  • 音游助手
  • 所有文章
  • 不干好事
  • Android
  • 大数据学习
  • 音游助手 隐私政策
2025 年 7 月
一 二 三 四 五 六 日
 123456
78910111213
14151617181920
21222324252627
28293031  
« 4 月    
本站若未声明则默认为原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 碎白啊

vue入门总结

  • Smallway
  • 2023-04-27
  • 0

学习Vue的总结

通过Vue操作echarts

1.首先创建一个容器

<code class="prettyprint" ><div ref="chart" style="width: 400px; height: 400px"></div>

此时创建了一个长宽都为400px的容器,且容器名为'chart'

2.导入echarts

<code class="prettyprint" >import * as echarts from "echarts"

3.在钩子(methods())中定义函数

methods: {
    // 引用钩子
    initChart() {
      // 定义函数
      const my_charts = echarts.init(this.$refs.chart);
      // 实例化echarts表
      const option = {
        title: {
          text: "年龄",
        },
        tooltip: {},
        xAxis: {
          data: ["李泽阳", "赵敏", "赵中豪", "程倩秋"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [20, 21, 21, 22],
          },
        ],
      };
      // 写入配置
      my_charts.setOption(option);
      // 将配置放入图表中展示
    },
  },

在钩子中调用 函数

mounted() {
    this.initChart();
    // 调用函数
  },

完整的代码为

<template>
  <div ref="chart" style="width: 400px; height: 400px"></div>
  <!-- 创建一个长宽为400px的容器 -->
</template>

<script>
import * as echarts from "echarts";
// 导入ecarts
export default {
  methods: {
    // 引用钩子
    initChart() {
      // 定义函数
      const my_charts = echarts.init(this.$refs.chart);
      // 实例化echarts表
      const option = {
        title: {
          text: "年龄",
        },
        tooltip: {},
        xAxis: {
          data: ["李泽阳", "赵敏", "赵中豪", "程倩秋"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [20, 21, 21, 22],
          },
        ],
      };
      // 写入配置
      my_charts.setOption(option);
      // 将配置放入图表中展示
    },
  },
  mounted() {
    this.initChart();
    // 调用函数
  },
};
</script>

运行后的结果如下

© 2025 小白的博客
Theme by Wing
陕ICP备2023005185号-1 陕公网安备61030302000374
本站由提供CDN加速/云存储服务
  • {{ item.name }}
  • {{ item.name }}