echarts往ssh项目中引入

来源：互联网发布：adobe flash cc mac版编辑：程序博客网时间：2024/05/29 04:14

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="example/www2/js/dist/echarts-all.js"></script>    <script>        var myChart = echarts.init(document.getElementById('main'));        var option = {            ...        }        myChart.setOption(option);    </script></body>

可以直接引入的单文件如下：

dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试
如下例子：

 <div id="main" style="height:400px"></div>    <!-- ECharts单文件引入 -->    <script type="text/javascript" src="../../plugins/echarts/dist/echarts-all.js"></script>    <script type="text/javascript">                        // 基于准备好的dom，初始化echarts图表                var myChart =  echarts.init(document.getElementById('main'));                 option = {    tooltip : {        trigger: 'axis'    },    legend: {        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    xAxis : [        {            type : 'category',            boundaryGap : false,            data : ['周一','周二','周三','周四','周五','周六','周日']        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:'搜索引擎',            type:'line',            stack: '总量',            data:[820, 932, 901, 934, 1290, 1330, 1320]        }    ]};                // 为echarts对象加载数据                 myChart.setOption(option);               </script>

模块化单文件引入（推荐）

如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：

dist（文件夹） : 经过合并、压缩的单文件
- echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
- chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
  - line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
  - bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
  - scatter.js : 散点图
  - k.js : K线图
  - pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
  - radar.js : 雷达图
  - map.js : 地图
  - force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
  - chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
  - funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
  - gauge.js : 仪表盘
  - eventRiver.js : 事件河流图
  - treemap.js : 矩阵树图
  - venn.js : 韦恩图
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="./js/echarts.js"></script></body>

在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="./js/echarts.js"></script>    <script type="text/javascript">        require.config({            paths: {                echarts: './js/dist'            }        });    </script></body>

require.config配置后就可以通过动态加载使用echarts

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="./js/echarts.js"></script>    <script type="text/javascript">        require.config({            paths: {                echarts: './js/dist'            }        });        require(            [                'echarts',                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表                'echarts/chart/bar'            ],            function (ec) {                var myChart = ec.init(document.getElementById('main'));                var option = {                    ...                }                myChart.setOption(option);            }        );    </script></body>

总结来说，模块化单文件引入ECharts，你需要如下4步：

为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

例如画柱状图：

<!DOCTYPE html><head>    <meta charset="utf-8">    <title>ECharts</title></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="height:400px"></div>    <!-- ECharts单文件引入 -->    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    <script type="text/javascript">        // 路径配置        require.config({            paths: {                echarts: 'http://echarts.baidu.com/build/dist'            }        });                // 使用        require(            [                'echarts',                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                                 var option = {                    tooltip: {                        show: true                    },                    legend: {                        data:['销量']                    },                    xAxis : [                        {                            type : 'category',                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                        }                    ],                    yAxis : [                        {                            type : 'value'                        }                    ],                    series : [                        {                            "name":"销量",                            "type":"bar",                            "data":[5, 20, 40, 10, 10, 20]                        }                    ]                };                        // 为echarts对象加载数据                 myChart.setOption(option);             }        );    </script></body>

阅读全文

0 0