当先锋百科网

首页 1 2 3 4 5 6 7

echarts绘制折线图

昨天接到的任务就是使用echarts来绘制

（http://www.buguzixun.com/trend/list.htm）这样的曲线图。因为是第一次接触这个新知识，于是，我和小伙伴一起研究了一天，终于才有了这样的效果，或许可以帮助到初次接触echarts的你。

源代码附上：

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <script src="static/js/echarts.js"></script>
</header>
<body>
<div id="main" style="width: 80%;height:500px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var  data=[{
        name: '西安',
        type: 'line',
        data: [[1458403200000,1], [1458489600000,3], [1458576000000,9], [1458662400000,27], [1458748800000,1200]]
    },{
        name: '长沙',
        type: 'line',
        data: [[1458403200000,3], [1458489600000,7], [1458576000000,44], [1458662400000,66], [1458748800000,120]]
    },{
        name: '云南',
        type: 'line',
        data: [[1458576000000,22], [1458835200000,102], [1459094400000,55], [1459180800000,180]]
    }
    ]
    function legendData(){
        var legendData=[];
        for(var i=0;i<data.length;i++){
            legendData.push(data[i].name)
        }
        return legendData;
    }
    option = {
        title: {
            text: '螺纹钢 走势图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.seriesName+'<br/>' + echarts.format.formatTime('yyyy-MM-dd',params.data[0]) + ' : ' + params.data[1];
            }
        },
        legend: {
            bottom:'50%',
            left: 'right',
            orient:'vertical',
            data:legendData()
        },
        xAxis: {
            splitLine: {// 网格线
                show: false
            },
            type: 'time',
            axisLabel:{ formatter: function(date){return echarts.format.formatTime('yyyy-MM-dd',date)}}
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            name:'价格(元/吨)',
            nameLocation:'middle',
            nameGap:40,
            axisLine: {    // 轴线
                show: false
            },
            axisTick: {    // 刻度线
                show: false
            },
            type: 'value',
        },
        series: data
    };
    myChart.setOption(option)
</script>
</html>