zoukankan      html  css  js  c++  java
  • ECharts本地部署

    将下载的包解压,再将包内文件copy到C:inetpubwwwroot下

    clip_image001

    在html中做如下引用:

    <script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>

    注意::

    下面这句在操作图表的script标签内

    require.config({

    paths: {

    echarts: "http://localhost/echarts/build/source" //echarts.js的路径C:inetpubwwwrootechartsuildsource

    //'echarts/chart/line': './js/echarts'

    }

    });

    完整如下

    clip_image002

    测试代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>ECharts-基本线性图及其配置要求</title>
        <!--<script src="js/esl.js" type="text/javascript"></script>-->
        <script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>
    </head>
    <body>
        <div id="main" style="height: 400px; 800px; border: 1px solid #ccc; padding: 10px;">
        </div>
    
        <script type="text/javascript" language="javascript">
            // 按需加载
            // Step:3 conifg ECharts's path, link to echarts.js from current page.
            // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
            require.config({
                paths: {
                    echarts: "http://localhost/echarts/build/source"
                }
            });
            require(
            [
                'echarts',
                'echarts/chart/line'//在这引用自己要用的包即可
            ],
            DrawEChart
            );
    
            //渲染ECharts图表
            function DrawEChart(ec) {
                //图表渲染的容器对象
                var chartContainer = document.getElementById("main");
                //加载图表
                var myChart = ec.init(chartContainer);
                myChart.setOption({
                    //图表标题
                    title: {
                        text: "ECharts简单线形图表及其配置展示实例", //正标题
                        link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
                        x: "center", //标题水平方向位置
                        subtext: "From:http://www.stepday.com", //副标题
                        sublink: "http://www.stepday.com", //副标题链接
                        //正标题样式
                        textStyle: {
                            fontSize: 24
                        },
                        //副标题样式
                        subtextStyle: {
                            fontSize: 12,
                            color: "red"
                        }
                    },
                    //数据提示框配置
                    //tooltip: {
                    //    trigger: 'axis' //触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 其实就是是否共享提示框
                    //},
                    //图例配置
                    legend: {
                        data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致
                        y: "bottom"
                    },
                    //工具箱配置
                    toolbox: {
                        show: true, //是否显示工具箱
                        feature: {
                            mark: false, // 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
                            dataView: { readOnly: false }, // 数据视图,上图icon左数8,打开数据视图
                            magicType: ['line', 'bar'],      // 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图
                            restore: true, // 还原,复位原始图表,上图icon左数9,还原
                            saveAsImage: true  // 保存为图片,上图icon左数10,保存
                        }
                    },
                    calculable: true,
                    //轴配置
                    xAxis: [
                            {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                                name: "月份"
                            }
                    ],
                    //Y轴配置
                    yAxis: [
                            {
                                type: 'value',
                                splitArea: { show: true },
                                name: "数值"
                            }
                    ],
                    //图表Series数据序列配置
                    series: [
                            {
                                name: '蒸发量',
                                type: 'line',
                                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                            },
                            {
                                name: '降水量',
                                type: 'line',
                                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                            }
                    ]
                });
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    第四章:运算符与表达式——参考手册笔记
    第三章:类型与对象——参考手册笔记
    Python书单
    第二章:词法约定——参考手册笔记
    第5章:分治法——《算法笔记
    第4章:减治法——《算法笔记
    第3章:蛮力法——《算法笔记
    第2章:算法效率分析——《算法笔记
    算法书单
    第1章:绪论:基本数据结构——《算法设计与分析基础》笔记
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/4159504.html
Copyright © 2011-2022 走看看