一:echarts之折线图

Posted itzlg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一:echarts之折线图相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line</title>
    <script src="../js/echarts.js"></script>
</head>
<body>
    <!-- step 2:准备一个div的dom元素,用于渲染Echarts图表 -->
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        // 图表实例化
        // step 3:初始化Echarts图表
        var mychart = echarts.init(document.getElementById("main"));
        // 图表使用
        // step 4:指定图表的配置项和数据
        var option = {
            title : {
                text: '未来一周气温变化',
                subtext: '纯属虚构',
            },
            tooltip : {
                show: true,
                trigger: 'axis'
            },
            legend: {
                data:['蒸发量','降水量'],
                left: "left"
            },
            toolbox: {
                show : true,
                orient: 'horizontal',
                left: 'right',
                top: 'top',
                color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],
                backgroundColor: 'rgba(0,0,0,0)',  // 工具箱背景颜色
                borderColor: '#ccc',  // 工具箱边框颜色
                borderWidth: 0,  // 工具箱边框线宽
                padding: 5,  // 工具箱内边距
                showTitle: true,
                feature : {
                    mark: {show: true,title: {mark:'辅助线-开关',markUndo:'辅助线-删除',markClear:'辅助线-清空'},lineStyle:{width:1,color:'#1e90ff',type:'dashed'}},
                    dataZoom:{
                        show:true,title:'数据视图',readOnly:true,
                        lang:['数据视图','美团','刷新'],
                        optionToContent: function(opt){
                            console.log(opt);
                            var axisData = opt.xAxis[0].data;
                            var series = opt.series;
                            var table = '<table style="width:100%;text-align:center"><tbody><tr>'+'<td>时间</td>'+'<td>'+series[0].name+'</td>'+'<td>'+series[1].name+'</td>'+'</tr>';
                            for(var i=0,l=axisData.length;i<l;i++){
                                table += '<tr>'
                                    + '<td>' + axisData[i] + '</td>'
                                    + '<td>' + series[0].data[i] + '</td>'
                                    + '<td>' + series[1].data[i] + '</td>'
                                    + '</tr>';
                            }
                            table += '</tbody></table>';
                            return table;
                        }
                    },
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, title:{line:'动态类型切换-折线图',bar:'动态类型切换-柱形图', stack:'动态类型切换-堆积',tiled:'动态类型切换-平铺'}, type: ['line', 'bar','stack','tiled']},
                    restore : {show: true,title:'还原',color:'black'},
                    saveAsImage : {show: true,title:'保存为图片',type:'jpeg',lang:['点击本地保存']}
                }
            },
            calculable : true,
            dataZoom:{
                show: true,
                realtime: true,
                start: 20,
                end: 80
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头
                    data : function(){
                        var list = [];
                        for(var i=1;i<=30;i++){
                            list.push('2013-03-'+i);
                        }
                        return list;
                    }()
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'最高',
                    type:'line',
                    data:function(){
                        var list = [];
                        for(var i=1;i<=30;i++){
                            list.push(Math.round(Math.random()*30));
                        }
                        return list;
                    }()
                },
                {
                    name:'最低',
                    type:'line',
                    data:function(){
                        var list = [];
                        for(var i=1;i<=30;i++){
                            list.push(Math.round(Math.random()*10));
                        }
                        return list;
                    }()
                }
            ]
        };

        // step 5:设置图表配置项。使用刚指定的配置项和数据显示图表
        mychart.setOption(option);
    </script>
</body>
</html>

以上是关于一:echarts之折线图的主要内容,如果未能解决你的问题,请参考以下文章

MPAndroidChart开源图表库之折线图

kibana-7可视化之折线图

python中matplotlib绘图封装类之折线图条状图圆饼图

pandas之折线图(plot)

pandas 数据可视化之折线图

Matplotlib基础教程之折线图