Echarts在Vue中的快手上手

Echarts在Vue中的快手上手

呈现效果

步骤1：在Vue项目中引入Echarts

import * as echarts from "echarts";

步骤2：准备一个呈现图表的盒子

<div id="echart" style="width: 400px; height: 400px"></div>

步骤3：初始化Echarts实例对象

var myChart = echarts.init(document.getElementById("echart"));

步骤4：准备配置项

var option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

完整代码

<template>
  <!-- 步骤二：准备一个呈现图表的盒子 -->
  <div id="echart" style="width: 400px; height: 400px"></div>
</template>
<script>
// 步骤一：引入echart
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    // 步骤三：初始化echarts实例对象
    var myChart = echarts.init(document.getElementById("echart"));
    // 步骤四：准备配置项
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: { // 直角坐标系中的X轴
        type: "category", //类目轴  默认情况是X轴是类目轴；Y轴是数值轴，yAxis为{}会自动去series下面的data匹配数据
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: { // 直角坐标系中的Y轴
        type: "value", //数值轴
      },
      series: [
        {
          name: "销量",
          type: "bar",  //图标的类型  bar:柱状图  line：折现图   pie:饼图
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    // 步骤五：将配置项设置给echarts实例对象
    myChart.setOption(option);
  },
};
</script>
<style scoped>
</style>