Echarts 线条的粗细，颜色变化，切换改变数据

最新推荐文章于 2024-04-25 14:40:40 发布

笨笨的幸福1230

最新推荐文章于 2024-04-25 14:40:40 发布

阅读量4.1k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_42709302/article/details/108124577

版权

本文通过Echarts实现线条粗细和颜色变化效果，并展示了如何在切换时改变数据。提供折线图和柱状图的代码示例，期待与读者共同探讨优化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**用Echarts实现以下效果图加粗样式 **
在这里插入图片描述

话不多说，直接甩代码

折线图代码

<div class="chart">
	<div class="font13 chart-title">
		<span class="active">提出建议</span>|<span>集中观察</span>|<span>专题调研</span>|<span>人大组织会议活动</span>
	</div>
	<div id="main"></div>
</div>

// 折线图
var myChart = echarts.init(document.getElementById('main'));
var myDateX =  ['于小慧', '张晓明', '黄晓霞', '李晓芳', '周小强', '李小虎', '张小红'];
var myDateY =  [450, 432, 401, 454, 590, 530, 610];

option = {
	grid: {
	    left: '5%',
	    right: '5%',
	    bottom: '3%',
	    containLabel: true
	},
    xAxis: {
		axisLine: {
			show:false,
			lineStyle:{ //lineStyle里面写y轴那一条线的样式
				color:'#333',
				width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
			}
		},
		axisTick: {show:false},
		splitLine:{show:false},
        type: 'category',
        data: myDateX,
		axisLabel:{  //数据显示不全
			interval:0
		}
    },
    yAxis: {
		show:true,
		axisLine: {
			show:false,
			lineStyle:{ //lineStyle里面写y轴那一条线的样式
				color:'#333',
				width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
			}
		},
		offset: 8,
		axisTick: {show:false},
		splitLine:{
			show:true
		},
        type: 'value'
    },
   series: [{
	   name:'样例3',
	   type:'line',
	   smooth: true,  //线条平滑
	   itemStyle: {
		   color: 'red', 
		   normal: {  
			   lineStyle: {        //

最低0.47元/天解锁文章