echarts+json笔记

最新推荐文章于 2024-05-15 14:53:08 发布

weixin_30438813

最新推荐文章于 2024-05-15 14:53:08 发布

阅读量113

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/liuyang92/p/6084022.html

版权

echart_test.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../demo.js"></script>
    <title>ECharts</title>
    <script src="../echarts.common.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body οnlοad="echarts_test('main', lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);">
	<input type="button" id="echarts_01" value="echarts_01" οnclick="echarts_test('main', lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);">
    <div id="main" style="height:400px;width:1000px"></div>    
    <script type="text/javascript">
    var json_var ='{"json_var_01":[{index:2, freq:200, lo:120},{index:1, freq:100, lo:150}]}';
    var json_data = eval("("+json_var+")");
    console.log(json_data);
    function down(x, y) {
        return (x.freq > y.freq) ? 1 : -1
    }
    json_data.json_var_01.sort(down);
    console.log(json_data);

    var lolo_spec = [100, 150, 100, 200, 100, 50, 400, 200, 500, 200];
    var lo_spec = [200, 220, 200, 300, 300, 90, 500, 400, 700, 300];
    var hi_spec = [500, 300, 400, 400, 550, 150, 600, 500, 880, 400];
    var hihi_spec = [600, 400, 500, 500, 700, 200, 1000, 700, 1000, 500];
    var meas_spec = [241, 260, 280, 400, 500, 100, 930, 560, 750, 350];
    var freq_spec = [150, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
    	         
    </script>
    <dir id="branch" style="height:400px;width:1000px"></dir>
    
    
</body>

demo.js

function demo_f01()
{
	alert("demo_f01");
}

function echarts_test (id, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec) 
{
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById(id));     
    var option = {
    	title:{
    		text:'title_name',
    		show:true,
    	},
        tooltip: {
            trigger:'axis',
            axisPointer: {
                type: 'line'
            },
            show: true,
        },
        legend: {
            data:['lolo','lo','hi','hihi','meas']
        },
        xAxis : [
            {
                type : 'category',
                splitLine: {
                    show: false,
                },
                data : freq_spec,
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine: {
                    show: false,
                }
            }
        ],
        series : [            
            {
                name:"hihi",
                type:"line",
                smooth: false,
                data: hihi_spec,

                areaStyle: {
                    normal: {
                        opacity:0.5,
                        color:'#FF0000',
                    }                    
                }
            },
            {
                name:"hi",
                type:"line",
                smooth: false,
                data: hi_spec,               
                areaStyle: {
                    normal: {
                        opacity:1,
                        color:'#FFFFFF',
                    }                    
                }
            },
            {
                name:"meas",
                type:"line",
                smooth: false,
                data: meas_spec,                
                lineStyle: {
                    normal: {
                        opacity:1,
                        color:'#00BB00',
                        width:3,
                    }                    
                }
            },
            {
                name:"lo",
                type:"line",
                smooth: false,
                data: lo_spec,              
                areaStyle: {
                    normal: {
                        opacity:0.5,
                        color:'#FFD306',
                    }                    
                }
            },
            {
                name:"lolo",
                type:"line",
                smooth: false,
                data: lolo_spec,
                areaStyle: {
                    normal: {
                        opacity:1,
                        color:'#FFFFFF',
                    }                    
                }
            },

        ],
        dataZoom: [
	        {
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100
	        },
	        {
	            type: 'inside',
	            xAxisIndex: 0,
	            start: 0,
	            end: 100
	        },
    	],

        toolbox: { 
            feature: {           
                restore:{},
                dataView: {
                    show:true,
                    readOnly:true,
                    lang:["Spectrum Data", "close"]
                },
                saveAsImage: {
                    show:true,
                    excludeComponents :['toolbox'],
                    pixelRatio: 2,
                }
            }
        },
    };
    //myChart.showLoading();
    // 为echarts对象加载数据
    myChart.hideLoading();
    myChart.setOption(option); 
}

转载于:https://www.cnblogs.com/liuyang92/p/6084022.html