PHP前端开发

Echarts折线图的实现(完整代码)

百变鹏仔 3周前 (11-27) #echarts
文章标签 完整

本篇文章给大家带来的内容是关于echarts折线图的实现(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

nbsp;html&gt;    <meta>    <title>Gauge</title>    <script></script>    <script></script>    <script></script>    <div>    </div><script>    var mychart = echarts.init(document.getElementById(&#39;mydiv&#39;));    var base = +new Date(1968, 9, 3);    var oneDay = 24 * 3600 * 1000;    var date = [];    var data = [Math.random() * 300];    for (var i = 1; i < 20000; i++) {        var now = new Date(base += oneDay);        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join(&#39;/&#39;));        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));    }    var option = {        tooltip: {            trigger: &#39;axis&#39;,            position: function (pt) {                return [pt[0], &#39;10%&#39;];            }        },        title: {            left: &#39;center&#39;,            text: &#39;大数据量面积图&#39;,        },        toolbox: {            feature: {                dataZoom: {                    yAxisIndex: &#39;none&#39;                },                restore: {},                saveAsImage: {}            }        },        xAxis: {            type: &#39;category&#39;,            boundaryGap: false,            data: date        },        yAxis: {            type: &#39;value&#39;,            boundaryGap: [0, &#39;100%&#39;]        },        dataZoom: [{            type: &#39;inside&#39;,            start: 0,            end: 10        }, {            start: 0,            end: 10,            handleIcon: &#39;M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z&#39;,            handleSize: &#39;80%&#39;,            handleStyle: {                color: &#39;#fff&#39;,                shadowBlur: 3,                shadowColor: &#39;rgba(0, 0, 0, 0.6)&#39;,                shadowOffsetX: 2,                shadowOffsetY: 2            }        }],        series: [            {                name: &#39;模拟数据&#39;,                type: &#39;line&#39;,                smooth: true,                symbol: &#39;none&#39;,                sampling: &#39;average&#39;,                itemStyle: {                    normal: {                        color: &#39;rgb(255, 70, 131)&#39;                    }                },                areaStyle: {                    normal: {                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                            offset: 0,                            color: &#39;rgb(255, 158, 68)&#39;                        }, {                            offset: 1,                            color: &#39;rgb(255, 70, 131)&#39;                        }])                    }                },                data: data            }        ]    };    mychart.setOption(option, true);</script>