首页 > 其他 > 详细

echart图表(折线图)

时间:2017-03-03 15:45:34      阅读:399      评论:0      收藏:0      [点我收藏+]

1、下载echart,引用echart.js

2、设置一个显示图表的区域

<div id="chart" style="height:300px;width: 600px;padding:30px;"></div>

3、配置引用的js地址

<script type="text/javascript">
    /**
* 行情-报价走势-直贴
*/
    require.config({
        paths: {
            echarts: ‘/js‘
        }
    });
    // 使用
    require(
        [
            ‘echarts‘,
            ‘echarts/chart/line‘ // 使用柱状图就加载bar模块,按需加载
        ],
        function (ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById(‘chart‘));
            var option = {
                tooltip: {
                    trigger: ‘axis‘
                },
                legend: {
                    data: [‘国股‘, ‘城商‘, ‘农商‘, ‘农合‘, ‘农信‘]
                },
                calculable: false,
                xAxis: [
                    {
                        type: ‘category‘,
                        boundaryGap: false,
                        data: [‘2-16‘, ‘2-17‘, ‘2-20‘, ‘2-21‘, ‘2-22‘]
                    }
                ],
                yAxis: [
                    {
                        type: ‘value‘,
                        max: 6,
                        min: 1,
                        //       splitNumber: 6,
                        axisLabel: {
                            formatter: ‘{value} %‘
                        }
                    }
                ],
                series: [
                    {
                        name: ‘国股‘,
                        type: ‘line‘,
                        data: [‘4.55‘, ‘4.60‘, ‘4.60‘, ‘4.60‘, ‘4.55‘]
                    },
                    {
                        name: ‘城商‘,
                        type: ‘line‘,
                        data: [‘4.80‘, ‘4.85‘, ‘4.85‘, ‘4.85‘, ‘4.80‘]
                    },
                    {
                        name: ‘农商‘,
                        type: ‘line‘,
                        data: [‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘]
                    },
                    {
                        name: ‘农合‘,
                        type: ‘line‘,
                        data: [‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘]
                    },
                    {
                        name: ‘农信‘,
                        type: ‘line‘,
                        data: [‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘, ‘0.00‘]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>

最后效果:

技术分享

echart图表(折线图)

原文:http://www.cnblogs.com/myparadiseworld/p/6496950.html

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