首頁 > 開發者 > 網站開發

echarts+json筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：tip   astyle   ons   title   show   down   sim   start   .json   

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 onload="echarts_test(‘main‘, lolo_spec, lo_spec, hi_spec, hihi_spec, meas_spec, freq_spec);"><input type="button" id="echarts_01" value="echarts_01" onclick="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); }

　　

echarts+json筆記

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More