图表库插件的使用

echarts图表库插件的使用

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

1. 什么是echarts图表

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

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

2. 简单使用方法

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

1. 安装

yarn add echarts

2. 引入

import * as echarts from "echarts";

3. 创建图标容器, html标签;

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

4. 初始化图表库

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

5. 配置图表

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)"
                }
            }
        ]
    });

6. 查看官方文档, 文档>配置项手册, 根据自己的需要查看文档, 配置对应属性样式

7. 官方有丰富的实例供选择, 点击进入实例可以获取代码

3. 具体的使用方法_

(在更新...)