ECharts绘制区域折线图

本文将介绍简单的使用 ECharts 绘制区域折线图。

ECharts 中可以通过 series: [{ areaStyle: {} }] 实现区域折线图,areaStyle 可以设置区域填充颜色、图形区域的起始位置、图形阴影的模糊大小、阴影颜色等等。

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts3 学习</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" id="../../page_favionc">
    <script src="../../public/js/echarts3/echarts.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            // 这里是关键代码,去了这行,将显示普通的折线图
            areaStyle: {}
        }]
    });
</script>

</body>
</html>

效果图:

ECharts绘制区域折线图

我们常常听人说,人们因工作过度而垮下来,但是实际上十有八九是因为饱受担忧或焦虑的折磨。 —— 卢伯克.J.
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号