Echarts的基本使用

echarts要使用的话，首先需要了解一下echarts的基本使用。

基本使用

1.打开官网：Apache EChartshttps://echarts.apache.org/zh/index.html

2.点击页面的快速入门，来到快速上手页面

3.开始学习使用步骤

（1）下载 npm install echarts

（2）在html中引入下载好的echarts

    <script src="../node_modules/echarts/dist/echarts.min.js"></script>

(2) 创建一个div，设置宽和高

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

（3）js代码

a.获取定义的标签名

var chartDom = document.getElementById('main');

b.初始化echarts,得到echarts实例对象

var myChart = echarts.init(chartDom);

c.定义option选项

 var option;

d.用echarts实例设置option选项,图表就可以正常显示了

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: "ECharts Getting Started Example",
  },
  tooltip: {},
  legend: {
    data: ["sales"],
  },
  xAxis: {
    data: ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"],
  },
  yAxis: {},
  series: [
    {
      name: "sales",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
myChart.setOption(option);

（4）然后就可以获取到一个简单的柱状图