echarts数据加载说明

最新推荐文章于 2024-07-12 23:04:08 发布

流风雨情

最新推荐文章于 2024-07-12 23:04:08 发布

阅读量2.4k

点赞数

分类专栏： Java & JavaEE 文章标签： javascript echarts-数据

本文链接：https://blog.csdn.net/qq_29232943/article/details/72566535

版权

Java & JavaEE 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

ECharts 是一款JavaScript图表库，适用于PC和移动设备，兼容多种浏览器。它提供了丰富的图表类型、多坐标系支持、移动端优化和强大的交互功能。在使用ECharts时，主要关注配置项和数据加载，特别是`series`下的`data`属性，用于设定图表的数据。通过官方文档可以获取详细的API和配置项说明，5分钟即可快速上手。

摘要由CSDN通过智能技术生成

echarts

简介
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
特性

丰富的图表类型
多个坐标系的支持
移动端的优化
深度的交互式数据探索
大数据量的展现
多维数据的支持以及丰富的视觉编码手段
动态数据
绚丽的特效
丰富的API example 教程

基本说明
5 分钟上手 ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js 如果要使用地图 引入相应的地图的js-->
    <!--引入的方式有很多种，CDN引入  本地引入--> 
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom（文档对象模型Document Object Model，简称DOM）这里是div标签 ，定义了一个显示的框，根据需要设置相应的大小-->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例 myChart 
        var myChart = echarts.init(document.getElementById('main'));


        // 指定图表的配置项和数据，这里面就是个性化自定义内容
        var option = {
        };


        // 使用刚指定的配置项和数据显示图表。可以理解为传入参数
        myChart.setOption(option);
    </script>
</body>
</html>

option = {
<!--设置图表的标题-->
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

上面是所有基本代码，每个页面都要有的
所以我们看到的example中只设置了option（指定图表的配置项和数据）因为那些页面都默认设置了

ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式
官网有所有的API和配置项的说明http://echarts.baidu.com/option.html#title

这里只说明数据加series 其他的详细说明请到这个页面http://echarts.baidu.com/option.html#series

series下data中说明http://echarts.baidu.com/option.html#series-line.data