曲线图

HTML:

 <div class="zxt" style="100%;height:100%;"><div id="main" style="100%;height:100%;border:0px solid #ccc;padding:0;"></div></div>

JS:

 <script src="js/echarts.js"></script>

arrtext = ["03", "04", "05", "06", "07", "08", "09"],arrvalue = [0, 1, 0, 0, 0, 4, 3] 

CreateLine(arrtext, arrvalue, 'main', '#b2b2b2'); 

function CreateLine(text,value,id,backcolor) {
        require.config({
            paths: {
                echarts: './js'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line'
            ],
            function (ec) {
                //--- 折柱 ---
                var myChart = ec.init(document.getElementById(id));
                myChart.setOption({


                    tooltip: {
                        trigger: 'axis'
                    },
                    backgroundColor: backcolor,

                    //animation:true,
                    toolbox: {
                        show: false,
                        feature: {
                            mark: { show: false },
                            dataView: { show: false, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: false },
                            saveAsImage: { show: false }
                        }
                    },
                    grid: {
                        x: 25,

                        y: 30,
                        x2: 30,
                        y2: 20,
                        borderWidth:0,
                        //borderColor:'#ff0000',
                    },
                    //calculable : true,
                    xAxis: [
                        {
                            type: 'category',
                            name: '时间',
                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#656668',
                                    type: 'solid',
                                    0
                                }
                            },
                            axisTick: {    // 轴标记
                                show: false,
                                length: 10,
                                lineStyle: {
                                    color: '#656668',
                                    type: 'solid',
                                    1
                                }
                            },
                            axisLabel: {
                                show: true,
                                interval: 'auto',    // {number}
                                //rotate: 45,
                                margin: 8,
                                //formatter: '{value}月',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'sans-serif',
                                    fontSize: 10,
                                    fontStyle: 'italic',
                                    //fontWeight: 'bold'
                                }
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#656668',
                                    type: 'solid',
                                    1
                                }
                            },
                            data: text,

                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '浏览量',
                            axisLine: {    // 轴线
                                show: true,
                                lineStyle: {
                                    color: '#656668',
                                    type: 'solid',
                                    1
                                }
                            },
                            axisLabel: {
                                show: true,
                                interval: 'auto',    // {number}
                                //rotate: 45,
                                margin: 8,
                                //formatter: '{value}月',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'sans-serif',
                                    fontSize: 10,
                                    fontStyle: 'italic',
                                    //fontWeight: 'bold'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#656668',
                                    type: 'solid',
                                    1
                                }
                            },
                        }
                    ],
                    series: [

                        {
                            name: '浏览量',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    lineStyle: {            // 系列级个性化折线样式，横向渐变描边
                                        2,
                                        color: (function () {
                                            var zrColor = require('zrender/tool/color');
                                            return zrColor.getLinearGradient(
                                                0, 0, 1000, 0,
                                                [[0, 'rgba(255,0,0,0.8)'], [0.8, 'rgba(255,255,0,0.8)']]
                                            )
                                        })(),
                                        shadowColor: 'rgba(0,0,0,0.5)',
                                        shadowBlur: 10,
                                        shadowOffsetX: 8,
                                        shadowOffsetY: 8
                                    }
                                },
                                emphasis: {
                                    label: { show: true }
                                }
                            },
                            data: value
                        }
                    ]
                });

            }
        );
    }