码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts折线图

时间:2014-10-28 17:48:16      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:echarts折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ECharts-基本线性图及其配置要求</title>
    <script src="js/esl.js" type="text/javascript"></script>
</head>
<body>
    <div id="main" style="height: 400px; 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: './js/echarts' //echarts.js的路径
            }
        });
        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
        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 : {show: true}, // 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
					dataView : {show: true, readOnly: false},// 数据视图,上图icon左数8,打开数据视图
					magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},// 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图
					restore : {show: true}, // 还原,复位原始图表,上图icon左数9,还原
					saveAsImage : {show: 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>


bubuko.com,布布扣

Echarts折线图

标签:echarts折线图

原文地址:http://blog.csdn.net/benjamin_whx/article/details/40543171

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!