zoukankan      html  css  js  c++  java
  • echarts-设置折线图中折线线条颜色和折线点颜色

    1、问题背景

         设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色


    2、实现源码

    (1)图形自分配颜色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    		<style>
    			body,html{
    				 99%;
    				height: 99%;
    				font-family: "微软雅黑";
    				font-size: 12px;
    			}
    			#line{
    				 100%;
    				height: 100%;
    			}
    		</style>
    		<script>
    			$(function(){
    				var chart = document.getElementById('line');  
                    var echart = echarts.init(chart); 
                    
                    var option = {
    				    title: {
    				        text: ''
    				    },
    				    tooltip: {
    				        trigger: 'axis'
    				    },
    				    legend: {
    				        data:['销售量']
    				    },
    				    grid: {
    				        left: '3%',
    				        right: '4%',
    				        bottom: '3%',
    				        containLabel: true
    				    },
    				    toolbox: {
    				        feature: {
    				            saveAsImage: {}
    				        }
    				    },
    				    xAxis: {
    				        type: 'category',
    				        boundaryGap: false,
    				        data: ['周一','周二','周三','周四','周五','周六','周日']
    				    },
    				    yAxis: {
    				        type: 'value'
    				    },
    				    series: [
    				        {
    				            name:'销售量',
    				            type:'line',
    				            stack: '销售量',
    				            data:[220, 132, 601, 314, 890, 230, 510]
    				        }
    				    ]
    				};
                      
                    echart.setOption(option);  
    			});
    		</script>
    	</head>
    	<body>
    		<div id="line"></div>
    	</body>
    </html>
    

    (2)线条自定义颜色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    		<style>
    			body,html{
    				 99%;
    				height: 99%;
    				font-family: "微软雅黑";
    				font-size: 12px;
    			}
    			#line{
    				 100%;
    				height: 100%;
    			}
    		</style>
    		<script>
    			$(function(){
    				var chart = document.getElementById('line');  
                    var echart = echarts.init(chart); 
                    
                    var option = {
    				    title: {
    				        text: ''
    				    },
    				    tooltip: {
    				        trigger: 'axis'
    				    },
    				    legend: {
    				        data:['销售量']
    				    },
    				    grid: {
    				        left: '3%',
    				        right: '4%',
    				        bottom: '3%',
    				        containLabel: true
    				    },
    				    toolbox: {
    				        feature: {
    				            saveAsImage: {}
    				        }
    				    },
    				    xAxis: {
    				        type: 'category',
    				        boundaryGap: false,
    				        data: ['周一','周二','周三','周四','周五','周六','周日']
    				    },
    				    yAxis: {
    				        type: 'value'
    				    },
    				    series: [
    				        {
    				            name:'销售量',
    				            type:'line',
    				            stack: '销售量',
    				            itemStyle : {
    								normal : {
    									lineStyle:{
    										color:'#00FF00'
    									}
    								}
    							},
    				            data:[220, 132, 601, 314, 890, 230, 510]
    				        }
    				    ]
    				};
                      
                    echart.setOption(option);  
    			});
    		</script>
    	</head>
    	<body>
    		<div id="line"></div>
    	</body>
    </html>
    

    (3)折点自定义颜色

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>echarts-设置折线图中折线线条颜色和折线点颜色</title>
    		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    		<style>
    			body,html{
    				 99%;
    				height: 99%;
    				font-family: "微软雅黑";
    				font-size: 12px;
    			}
    			#line{
    				 100%;
    				height: 100%;
    			}
    		</style>
    		<script>
    			$(function(){
    				var chart = document.getElementById('line');  
                    var echart = echarts.init(chart); 
                    
                    var option = {
    				    title: {
    				        text: ''
    				    },
    				    tooltip: {
    				        trigger: 'axis'
    				    },
    				    legend: {
    				        data:['销售量']
    				    },
    				    grid: {
    				        left: '3%',
    				        right: '4%',
    				        bottom: '3%',
    				        containLabel: true
    				    },
    				    toolbox: {
    				        feature: {
    				            saveAsImage: {}
    				        }
    				    },
    				    xAxis: {
    				        type: 'category',
    				        boundaryGap: false,
    				        data: ['周一','周二','周三','周四','周五','周六','周日']
    				    },
    				    yAxis: {
    				        type: 'value'
    				    },
    				    series: [
    				        {
    				            name:'销售量',
    				            type:'line',
    				            stack: '销售量',
    				            itemStyle : {
    								normal : {
    									color:'#00FF00',
    									lineStyle:{
    										color:'#00FF00'
    									}
    								}
    							},
    				            data:[220, 132, 601, 314, 890, 230, 510]
    				        }
    				    ]
    				};
                      
                    echart.setOption(option);  
    			});
    		</script>
    	</head>
    	<body>
    		<div id="line"></div>
    	</body>
    </html>
    

    3、实现结果

    (1)图形自分配颜色


    (2)线条自定义颜色


    (3)折点自定义颜色


    4、问题说明

    (1)设置折线线条颜色
            lineStyle:{
                     color:'#00FF00'
             }


    (2)设置折线折点颜色

           itemStyle : {
                                    normal : {
                                        color:'#00FF00'
                                    }
                                }


  • 相关阅读:
    分享 35 套精美的 PSD 图标素材
    HTML 5 标签、属性、事件及浏览器兼容性速查表
    推荐21款最佳 HTML 5 网页游戏
    二分查找
    双指针合并两个排序数组
    关于explorer.exe文件或目录已损坏的问题
    一文弄懂数组的和
    云效DevOps实践如何基于云效实现测试自动化集成和分析
    五福背后的 Web 3D 引擎 Oasis Engine 正式开源
    Delta Lake在Soul的应用实践
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314150.html
Copyright © 2011-2022 走看看