Echarts折线图

最新推荐文章于 2022-05-01 11:27:18 发布

aa小小

最新推荐文章于 2022-05-01 11:27:18 发布

阅读量346

点赞数 1

分类专栏： Echarts 文章标签： Echarts折线图坐标轴隐藏显示折线颜色样式转折点颜色样式

本文链接：https://blog.csdn.net/qq_34752068/article/details/81514183

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts折线图：坐标轴隐藏显示；折线颜色样式；转折点颜色样式

最终的折线图效果：
这里写图片描述

源码如下：
需要引入两个文件：jquery.min.js和echarts.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Echarts-折线图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
        <div style="width: 500px;height:280px;" id="broken">

        </div>
</body>
<script>
    /* 饮用水水质变化折线图 */
var brokenChart = echarts.init(document.getElementById("broken"));
var option6 = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['一级保护区', '二级保护区','准保护区']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
        /* 下载图表为图片 */
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        axisLine: {
            lineStyle: {//这里可以设置x轴的颜色color,粗细width等等
                color: '#CCC',
            },
        },
        show: true,
        type: 'category',
        axisTick: {//隐藏刻度
            show: false
        },
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#666'
            }
        },
        type: 'category',
        boundaryGap: false,
        data: ['18/01', '18/02', '18/03', '18/04', '18/05', '18/06', '18/07', '18/08', '18/09', '18/10']
    },
    yAxis: {
        type: 'value',
        axisTick: {//隐藏刻度
            show: false
        },
        axisLine: {
            lineStyle: {//这里可以设置y轴的颜色color,粗细width等等
                color: '#ffffff',
            },
        },
        axisLabel: {//x轴标记的字体样式
            textStyle: {
                fontSize: 12,
                color: '#666'
            }
        },
    },
    series: [{
            name: '一级保护区',
            type: 'line',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#5D80A6', //设置折线点的颜色
                    lineStyle: {
                        color: '#5D80A6' //设置折线颜色
                    }
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]
        },
        {
            name: '二级保护区',
            type: 'line',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#EDB760', //设置折线点的颜色
                    lineStyle: {
                        color: '#EDB760' //设置折线颜色
                    }
                }
            },
            data: [320, 332, 301, 334, 390, 330, 320, 191, 234, 290]
        },
        {
            name: '准保护区',
            type: 'line',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: '#ED6060', //设置折线点的颜色
                    lineStyle: {
                        color: '#ED6060' //设置折线颜色
                    }
                }
            },
            data: [320, 332, 301, 334, 390, 330, 320, 191, 234, 290]
        }
    ]
};

brokenChart.setOption(option6);
$(window).resize(brokenChart.resize);
</script>
</html>