zoukankan html css js c++ java

Echarts 简单报表系列二：折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="pic4" style=" 600px;height:400px;"></div>
    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script>
        var myChart13 = echarts.init(document.getElementById('pic4'));
        var data = [];
        option15 = {
                title: {
                    text: '曲线',
                },
                tooltip: {
                    trigger: 'axis',

                },
                legend: {
                    data:['昨日(11月8日)','今日(11月9日)']
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                color:["red","#CD3333"],
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
                },
                yAxis: {
                    type: 'value',
                    name: '单位（kW）',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name:'昨日(11月8日)',
                        type:'line',
                        data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],
                        itemStyle: {  
                            normal: {  
                                //color: function(params) {
                  　　　　　　  //    var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
                                //    //若返回的list长度不足，不足部分自动显示为最后一个颜色
                  　　　　　　  //      return colorList[params.dataIndex]
                 　　　　　　   //   },
                                label: {  
                                    show: true,  
                                    position: 'top'
                                }  
                            }  
                        }
                    },
                    {
                        type:'line',
                        name : '今日(11月9日)',
                        data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
                    }
                        ]
            };

        myChart13.setOption(option15);
    </script>
</body>
</html>

效果如下：

查看全文

相关阅读:
emacs 探索之六：latex中文支持
 One网络模拟器探索之六：Report类的扩展
 emacs 探索之五：latex配置
 emacs 探索之三：基本操作
 DataSet数据传送性能比较
 SQL 2008 附加数据库报5120的错误的解决办法
 软件工程师不可不知的10个概念
 在日期上加上相应天数，并在GridView上显示
 SQL 跨表更新
 SQLSERVER 处理两个日期相减

原文地址：https://www.cnblogs.com/huanghongbo/p/9059902.html