Vue——使用echarts

官网地址：https://echarts.apache.org/zh/index.html

1. 安装依赖

cnpm i -S echarts

2. 使用

//html容器
<template>
  <div id="main" style="width: 500px; height: 500px"></div>
</template>
//js初始化
import * as echarts from "echarts";
let myChart = echarts.init(document.getElementById("main"));
let option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
// 绘制图表
myChart.setOption(option);