Echarts之折线图Demo

最新推荐文章于 2024-06-06 13:20:02 发布

smile radiantly

最新推荐文章于 2024-06-06 13:20:02 发布

阅读量435

点赞数 1

分类专栏：前端插件文章标签： echarts

本文链接：https://blog.csdn.net/zhixingwu/article/details/103013653

版权

前端插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前后端无分离，在jsp中导入echarts，制作折线图。

下面有关echarts.js文件都是从echarts官网下载而来，也可以从bootCDN直接引入。
bootstrap官网
 BootCDN官网
 echarts官网

Demo：

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<%--echarts相关文件引入--%>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript" src="echarts/macarons.js"></script>
    <script type="text/javascript" src="echarts/vintage.js"></script>
    <script type="text/javascript" src="echarts/shine.js"></script>
    <script type="text/javascript" src="echarts/dark.js"></script>
</head>
<body>
	<div>
		<div id="smoke" style="width: 100%;height: 320px;"></div>
        <script type="text/javascript">
            var charts_smoke = echarts.init(document.getElementById('smoke'));
            //自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
            var colors = ['#FF6666','#5FA0FA','#51CEC6','#FFB703','#FF9999'];     
            var option_smoke = {
                backgroundColor: '',//背景颜色透明
                color: colors,
                title: {
                    text: '',
                    subtext: '',
                    left: ''
                },
                tooltip: {
                    trigger: 'axis',    // 鼠标经过提示
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'cross',        // 默认为直线，可选为：'line' | 'shadow'
                        label: {
                            backgroundColor: '#6a7985'      // 提示标签的背景颜色
                        },
                    }
                },
                dataset: {
                    source: [
                        ['projectName', 'passRate' ],
                        <c:forEach items="${smokeList}" var="smoke">
                        ['${smoke.projectName}','${smoke.passRate}'],
                        </c:forEach>

                    ]
                },
                legend: {
                    type: 'plain',
                    orient: 'horizontal',
                    // orient: 'vertical',
                    // pageButtonPosition: 'end',
                    // right: 10,
                    // top: 'bottom',
                    left: 'left',
                    // bottom: -50,
                    icon: "roundRect",     // circle  roundRect
                    data: [ 'passRate'],
                    selected: {     // 图例默认的显示与隐藏

                    },
                    textStyle: {    //图例文字的样式
                        color: '#000',
                        fontSize: 14
                    }
                },
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '15%',
                    bottom: '16%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        // dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['bar', 'line']},
                        dataZoom: {
                            yAxisIndex: 'none',
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    },
                    left: 'left',
                    orient: 'horizontal',
                    // orient: 'vertical',
                    top: '0'
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,     //数据从坐标轴开始
                    axisLine: {onZero: false},
                    show: true     //隐藏x轴
                    /*data: [].map(function (str) {
                        return str.replace(' ', '\n')
                    })*/
                },
                yAxis: [
                    {//第一个y轴位置在左侧
                        show: true,    //隐藏y轴
                        position: 'left',
                        type: 'value',
                        name: '',
                        min: 90,
                        max: 100,
                        interval: 2,
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        // 控制网格线
                        splitLine: {
                            show: false,    //去除网格线
                            //  改变轴线颜色
                            lineStyle: {
                                // color: '#2a2a2d'
                            }
                        },
                        axisTick: {       //y轴刻度线
                            show: false
                        },
                    },


                ],
                dataZoom: [// 这个dataZoom组件，若未设置xAxisIndex或yAxisIndex，则默认控制x轴。
                    {
                        type: 'slider',//这个 dataZoom 组件是 slider 型 dataZoom 组件（只能拖动 dataZoom 组件导致窗口变化）
                        xAxisIndex: 0, //控制x轴
                        start: 0, 	// 左边在 10% 的位置
                        end: 100, 	// 右边在 60% 的位置
                        // orient: 'vertical',
                        // left: 'left'
                    },
                    {
                        type: 'inside',//这个 dataZoom 组件是 inside 型 dataZoom 组件（能在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放）
                        xAxisIndex: 0,//控制x轴
                        start: 0,
                        end: 100
                    },

                ],
                visualMap: {	//定义分区域颜色显示
                    left: 'right',
                    orient: 'horizontal',
                    top: 0,
                    right: 0,
                    pieces: [{
                        gt: 90,
                        lte: 95,
                        color: '#ff9933'
                    }, {
                        gt: 95,
                        lte: 100,
                        color: '#5FA0FA'
                    }, {
                        gt: 100,
                        color: '#cc0033'
                    }],
                    outOfRange: {
                        color: '#999'
                    }
                },
                series: [
                    {
                        type: 'line',yAxisIndex: '0', /*areaStyle: {}     areaStyle: {normal: {}}     显示区域面积*/
                        itemStyle: {
                            normal: {
                                // color: colors[1],   //柱状图颜色
                                label: {    //柱状图上指的显示
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: 16
                                    }
                                },
                            },
                            emphasis: {
                                color: colors[0],   //鼠标悬浮时柱状图颜色
                            }
                        },
                        markLine: {		//显示区域区分线
                            silent: true,
                            data: [{
                                yAxis: 95
                            }]
                        }
                    },


                ]
            };
            charts_smoke.setOption(option_smoke);

        </script>
	
	</div>
</body>

效果图：
在这里插入图片描述

smile radiantly

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts之折线图Demo

前后端无分离，在jsp中导入echarts，制作折线图。下面有关echarts.js文件都是从echarts官网下载而来，也可以从bootCDN直接引入。bootstrap官网BootCDN官网echarts官网Demo：<!DOCTYPE html><%@ page contentType="text/html;charset=UTF-8" language="j...
复制链接

扫一扫

专栏目录