首页 > 其他 > 详细

ECharts教程

时间:2019-04-16 12:15:35      阅读:217      评论:0      收藏:0      [点我收藏+]

5 分钟上手 ECharts

获取 ECharts

引入 ECharts

<script src="echarts.min.js"></script>

绘制一个简单的图表

  • 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器,然后通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
<script src="echarts.min.js"></script>

<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>

自定义构建 ECharts

  • 构建好的 echarts,可以直接在浏览器端项目中使用
    • 完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js。
    • 常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js。
    • 精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js
  • 如果对文件体积有更严苛的要求,可以自己构建 echarts,能够仅仅包括自己所需要的图表和组件。
    • 在线自定义构建:https://echarts.baidu.com/builder.html
    • 使用 echarts/build/build.js 脚本自定义构建:比在线构建更灵活一点,并且支持多语言。
    • 直接使用构建工具(如 rollup、webpack、browserify)自己构建

准备工作:创建自己的工程和安装 echarts

import * as echarts from 'echarts';

使用 echarts 提供的构建脚本自定义构建

ECharts教程

原文:https://www.cnblogs.com/qq3279338858/p/10716041.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!