echarts图表库插件的使用

常见图表库: echarts , antv(蚂蚁金服做的). datav (阿里体系的)
国际上: d3 ds.js

1. 什么是echarts图表

ECharts是一款基于javaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。2021年1月26日晚， Apache基金会官方宣布EChaiis项目正式毕业。

2. 简单使用方法

详情可以看官方文档; 这里我记录下简单的
echarts官网

安装

yarn add echarts

引入

import * as echarts from 'echarts';

创建图标容器, html标签;

<div id="echars1"></div>

初始化图表库

var myChart = echarts.init(document.getElementById(‘#echars1’));

配置图表

myChart.setOption({
        // 标题
        title: {
            text: '近7天运动时长',
            textStyle: {
                fontSize: '14px',
                fontWeight: '400'
            }
        },
        // 布局grid
        grid: {
            left: 40
        },
        // x轴; 类目轴
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // y轴; 数值轴
        yAxis: {
            type: 'value'
        },
        // 数据序列
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    });