Echarts学习

Posted yuzhou133

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts学习相关的知识,希望对你有一定的参考价值。

ECharts,一个纯 javascript 的图表库,可以流畅的运行在 PC 和移动设备上

认识 ECharts

  ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

ECharts 有哪些特点

  • ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;
  • ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;
  • ECharts 种类多,ECharts 实现简单,各类图形都有;相应的模板,还有丰富的 API 及文档说明,非常详细;
  • ECharts 兼容性好,基于html5,有着良好的动画渲染效果。

 引入echarts

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

 简单示例1:

<html>
<head>
    <title>ECharts示例</title>
    <script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
    <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>

 南丁格尔图

<div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById(main));

        myChart.setOption({
            series: [
                {
                    name: 访问来源,
                    type: pie,
                    radius: 55%,
                    data: [
                        { value: 235, name: 视频广告 },
                        { value: 274, name: 联盟广告 },
                        { value: 310, name: 邮件营销 },
                        { value: 335, name: 直接访问 },
                        { value: 400, name: 搜索引擎 }
                    ]
                }
            ]
        })
    </script>

 

以上是关于Echarts学习的主要内容,如果未能解决你的问题,请参考以下文章

echarts学习总结:一个页面存在多个echarts图形,图形自适应窗口大小

echarts4的学习

ECharts初步学习

图表控件== 百度 echarts的入门学习

ECharts概念学习系列之ECharts结合phpStudy使用(图文详解)

React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」