关于echarts常见的配置项运用

最新推荐文章于 2024-04-03 06:21:14 发布

冰魂破

最新推荐文章于 2024-04-03 06:21:14 发布

阅读量384

点赞数

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/ks8380/article/details/90400312

版权

javascript 同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

包含对标题图表位置工具栏 xy轴边框颜色以及刻度颜色网格样式拐点颜色的配置详情见代码

<!DOCTYPE html>
<html>
<head>
	<title>echarts</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;height: 100%;background: #0F1330;
		}
		#charts1{
			width: 600px;
			height: 400px;
			background: #0F214C;
			border: 2px solid #0F51A6;
			margin: 10px 0 0 10px;
		}

	</style>
</head>
<body>
	<div class="echarts">
		<!-- 折线图渐变 -->
		<div id="charts1">
				
		</div>
	</div>


	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="echarts.min.js"></script>

	<script type="text/javascript">
		var echarts1 = echarts.init(document.getElementById('charts1'));
		var option = {
			// 配置项  常用的是text  与 textStyle
    title: {
        text: '折线图颜色渐变',
         textStyle:{
        //文字颜色
        color:'#fff',
        //字体风格,'normal','italic','oblique'
        fontStyle:'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight:'bold',
        //字体系列
        fontFamily:'sans-serif',
        //字体大小
　　　　 fontSize:18,
    	}
    },
    // 提示框组件  item 散点图饼图  axis 柱状图 折线图   no 
    tooltip: {
        trigger: 'axis'
    },
    // 图标位置
    grid: {
        left: '10%',
        right: '6%',
        bottom: '6%',
        containLabel: false
    },
    //工具栏 内置导出图片 数据图  等五个工具
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [8,10,12,14,16,18,20,22,24,2,4,6],
        // 控制边框颜色
         axisLine: {
	            lineStyle: {
	                type: 'solid',
	                color: '#00F8F9',//左边线的颜色
	                width:'2'//坐标线的宽度
	            }
	        },
	       // 刻度
	        axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
          },


    },
    yAxis: {
        type: 'value',
        axisLine: {
	            lineStyle: {
	                type: 'solid',
	                color: '#00F8F9',//左边线的颜色
	                width:'2'//坐标线的宽度
	            }
	        },
	      axisLabel: {
						color: "#fff" 
					},
					// 网格样式
				splitLine: {
          show: true,
          lineStyle:{
               color: "#333",
               width: 1,
              type: 'solid'
          }
        }

    },
    series: [
        {
            name:'',
            type:'line',
            color:['#00F8F9'],	// 拐点颜色
            // symbol:'circle',	// 实心圆
            symbolSize:4,			// 
            // 设置颜色渐变
            areaStyle: {normal: {
                color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#01F9FE'},
                            {offset: 0.5, color: '#04666E'},
                            {offset: 1, color: '#000'}
                        ]
                ),           
              }},
              // 折线的颜色修改
              itemStyle : {
                normal : {
                  lineStyle:{
                    color:'#00F8F9',
                    type:"dashed"       // 虚线  dotted 圆点
                  },
                  label:{               // 显示折点数据
                    show:true,
                  }
                }
              },
            data:[1350, 300, 800, 200, 700, 100, 1,600,1	]
        }
    ]
};
echarts1.setOption(option)


	</script>


</body>
</html>