js繪制折線圖

html代碼：

<div id="price_tend" class="product_info_content" style="width:1100px;height:500px;">
</div>

 

JavaScript代碼：

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('price_tend'));
    var X_date = "<%=tend_date%>";
    var X_price = "<%=tend_price%>";
    var date = X_date.split(",");
    var price = X_price.split(",");
    //指定圖表的配置項和數據
    var option={
        //標題
    title:{
        text:'歷史價格走勢圖'
     },
    //保存圖片
    toolbox:{
            show:true,
        feature:{
           saveAsImage:{
                  show:true
            }
        }
        },
    tooltip: {
            trigger:'axis'
    },
     //圖例-每一條數據的名字叫銷量
    legend:{
        data:['價格']
    },
    //x軸
    xAxis:{
        data:date
    },
    //y軸沒有顯式設置，根據值自動生成y軸
    yAxis:{
        type:'value'
    },
    //數據-data是最終要顯示的數據
    series:[{
        name:'價格',
        type:'line',
        data:price,
        showSymbol:false
    }]
    };
    //使用剛剛指定的配置項和數據項顯示圖表
    myChart.setOption(option);
</script>

運行效果：