创建echarts图表

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

快速入门：https://echarts.apache.org/handbook/zh/get-started/

配置项手册： Documentation - Apache ECharts    （配置图表样式）

第一步

下载npm包

npm install echarts

 第二步

在http里面引入

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

第三步 

创建一个div (注意宽度和高度)

实例

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

 第四步

在js中：初始化main

基于准备好的dom，初始化echarts实例 

var myChart = echarts.init(document.getElementById('main'));

在js中：定义option

 指定图表的配置项和数据

var option = {
       // 图表标题
       title: {
           text: '标题文本'
       },
       // 鼠标放到图表上出现的弹出框提示框
       tooltip: {
           trigger: 'axis'
       },
       // 设置图例项
       // legend: {
       //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
       // },
       // 修饰图表在整个标签上的位置
       grid: {
           left: '30%',
           right: '4%',
           bottom: '3%',
           containLabel: true
       },
       // 工具箱：包含下载图表的图标
       // toolbox: {
       //     feature: {
       //         saveAsImage: {}
       //     }
       // },
       // 配置x轴内容
       xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       // y轴内容
       yAxis: {
           // type: 'value'
       },
       // 图表中的主要数据
       series: [
           {
               // 图例项中的名称
               name: 'Email',
               // 图表类型
               type: 'line',
               stack: 'Total',
               data: [120, 132, 101, 134, 90, 230, 210]
           },
           {
               name: 'Union Ads',
               type: 'line',
               stack: 'Total',
               data: [220, 182, 191, 234, 290, 330, 310]
           },
           {
               name: 'Video Ads',
               type: 'line',
               stack: 'Total',
               data: [150, 232, 201, 154, 190, 330, 410]
           },
           {
               name: 'Direct',
               type: 'line',
               stack: 'Total',
               data: [320, 332, 301, 334, 390, 330, 320]
           },
           {
               name: 'Search Engine',
               type: 'line',
               stack: 'Total',
               data: [820, 932, 901, 934, 1290, 1330, 1320]
           }
       ]
   };

在js中：设置option 

使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

代码实例：

import React, { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import './index.css'
function App() {
  const cbox = useRef(null);
  const [option, setOption] = useState({
    legend: {},
    tooltip: {},
    dataset: {
      dimensions: ['product', '2015', '2016', '2017'],
      source: [
        { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
        { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
        { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
        { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  })


  useEffect(() => {
    const myChart = echarts.init(cbox.current);
    setOption(option)
    myChart.setOption(option);
  }, [])
  return (
    <div ref={cbox} className='ssdd'>

    </div>
  )
}

export default App