ECharts--商业化数据图表

最新推荐文章于 2023-03-11 19:58:28 发布

码农凯

最新推荐文章于 2023-03-11 19:58:28 发布

阅读量514

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_46692492/article/details/108192598

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ECharts–商业化数据图表

什么是ECharts？

 商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示

ECharts支持的图表

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、k线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表图、漏斗图、事件河流图

EChart和Chart对比

Echarts的优点：

图形丰富，可以使用各种各样的功能
动态数据：数据的改变驱动图表展现的改变
无障碍访问：支持自动根据图标配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图标的内容
多维数据的支持以及丰富的视觉编码手段：对于传统的散点图等，传入的数据也可以是多个维度的。

ECharts的引入

一、引入echarts.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

二、为ECharts准备一个具备高宽的DOM容器
id为main的div用于包含ECharts绘制的图标：

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

三、设置配置信息
ECharts库使用json格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

option表示使用json 数据格式的配置来绘制图表。步骤如下：
标题
为图标配置标题

title:{
text:'第一个 ECh'arts 实例'
}

提示信息
配置提示信息：

tooltip:{},

图例组件
图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制那些系列不显示。

legend：{
    data:[{
        name:'系列1'，
        //强制设置图形为圆/
        icon：'circle'
        //设置文本为红色
        textStyle：{
            color：'red'
        }
    }]

x轴
配置要在x轴显示的项：

    xAxis:{
        data:["衬衫"，"羊毛衫","雪纺衫","裤子","高跟鞋"，"袜子"]
    }

Y轴
配置要在Y轴显示的项。

yAxis:{}

系列列表
每个系列通过type决定自己的图表类型

    series:[{
    name:'销量'，//系列名称
    type:'bar',//系列图表类型
    data:[5,20,36,10,10,20]//系例如中的数据内容
    }]
每个系列通过type决定自己的图标类型：
- type:'bar'：柱状/条形图
- type:'linr'：折线/面积图
- type:'pie'；饼状图
- type:'scatter'：散点图（气泡）
- type:'effectScatter'：带有涟漪特效动画的散点（气泡）
- type:'radar'雷达图
- type:'tree'树状图
- type:'treemap'树形图
- type:'graph'关系图
- type:'candlestick'k线图
- type:'themeRiver'：主题河流
- 
第一个实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
-----

码农凯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts--商业化数据图表

ECharts–商业化数据图表什么是ECharts？商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示ECharts支持
复制链接

扫一扫

专栏目录