.什么是ECharts

最新推荐文章于 2023-11-21 16:33:51 发布

jz1234_

最新推荐文章于 2023-11-21 16:33:51 发布

阅读量456

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/jz1234_/article/details/127559336

版权

1.什么是ECharts?

ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上

什么是数据可视化?

也就是可以将数据通过图表的形式展示出来，

ECharts提供的图表类型：

ECharts4.0之前, 底层是使用canvas标签来实现图表绘制的
ECharts4.0开始, 为了提升移动端性能, 还支持 SVG 渲染
ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing）等：
在这里插入图片描述

ECharts官网地址：

https://echarts.apache.org/zh/index.html

1.2 ECharts基本使用

使用步骤：

导入ECharts插件
为ECharts准备一个容器
拿到准备好的容器
创建一个ECharts对象
对ECharts进行一些配置（只有这一步不同，因为不同的图标等里
面配置的内容是不一样的，其余五步都是固定的）
将配置传递给ECharts

 /*3.拿到准备好的容器*/
    let oDiv = document.querySelector("div");
 
    /*4.创建一个ECharts对象*/
    let myCharts = echarts.init(oDiv);
 
    /*5.对ECharts进行一些配置*/
    let option = {
        // 设置图表的标题
        title: {
            text: 'ECharts 入门示例'
        },
        // 设置图表的图例
        legend: {
            data:['销量', '产量']
        },
        // 设置X轴上显示的数据
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {},
        // 设置图表的数据
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '产量',
            type: 'bar',
            data: [50, 120, 136, 60, 40, 80]
        }]
    };