关于Echarts的一些设置总结

夏之小星星

已于 2024-04-19 09:52:10 修改

阅读量804

点赞数 2

文章标签： echarts 前端 javascript

于 2024-03-13 16:29:52 首次发布

本文链接：https://blog.csdn.net/Cabriella_/article/details/136683321

版权

本文分享了使用Echarts进行数据展示时遇到的问题，包括柱状图的渐变颜色、宽度、图例位置、图表布局、直线插入、el-dialog兼容性、option修改、多图样式设置、y轴调整以及折线图的节点单位、样式和拐点处理。

摘要由CSDN通过智能技术生成

最近领导让我一个偏后端程序员画各种数据展示echarts页面，遇到好多问题在此记录一下，未完待续。。。
ps：不喜欢画页面啊啊啊啊啊，以前公司这些都是ui的活啊啊啊啊，折磨死我啦啊啊啊啊

一、柱形图

1、echarts如何设置柱形颜色渐变

在option加color属性

option = {          
     color: {
			type: 'linear',
			// x=0,y=1,柱子的颜色在垂直方向渐变
			x: 0,
			y: 1,
			colorStops: [
				// 0%处的颜色
				{
					offset: 0,
					color: '#53AC2C',
				},
				// 100%处的颜色
				{
					offset: 1,
					color: '#96DF74',
				},
			],
			global: false // 缺省为 false
		},
}

2、echarts柱状图宽度如何设置

在series数组的元素中添加barWidth属性

series: [
     {
        data: [18, 12, 9, 12, 14, 16, 12,8,11,13,9,6],
        type: 'bar',
        barWidth: 17,
        label: {
            show: true,
            color: "#fff",
             position: 'top',
        },
     },
],

3、echarts图例位置如何设置

在option中添加legend属性

 option = {
            legend: {
              right: 5,//图例位置调整
              top: 20,//图例位置调整
              bottom: 30,//图例位置调整
              width:10,//图例宽度，控制图例是横向排列还是纵向排列
              itemGap: 20, //图例间距
              itemHeight: 6, //图例小方框的高度
              itemWidth: 15, //图例小方框的宽度
              icon: 'circle',   //图例前面的图标形状icon可选样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
              textStyle: {
                color: "#fff",//如果需要图例文字颜色与图例颜色保持一致，该属性可设置成“auto”
              },              
            },
 }

4、echarts图表位置调整

在option中添加grid属性

 option={
 	grid: {
           		left: "5%",
            	right: "15%",
           		bottom: "2%",
              	containLabel: true,
     },
}

5、如何在echarts柱状图中插入直线

在series数组中添加元素

 series: [
 	{
         type: 'bar',
         markLine: {
         	silent: true, // 鼠标移动到标记线上无操作
            symbol: "none",
            itemStyle: {
               normal: {
                  label : {
                     show:false
                   },
                  lineStyle: {
                    color: '#04FF58',
                  }
               }
             },                       
             data: [
               {
                  yAxis: '60' // 分割线的位置
                } 
             ]
         }
     },
 ]

6、el-dialog里面的echarts不显示问题

初始化方法写在this.$nextTick里面

 this.$nextTick(() => {
                let kglChart1 = this.$echarts.init(document.getElementById('echarts'))
                kglChart1.setOption(option,true);
                
	        })

7、echarts修改option并重新调用setOption方法后，图表样式没有改变

在setOption方法调用的时候，传递第二个参数为true

kglChart1.setOption(option,true);

8、echarts多条柱状图如何单独设置渐变色

在series数组元素中添加itemStyle属性

 series: [             
     {
         name:'类型',
         data: [10, 2, 16, 8, 10, 12, 16,13,9,7,11,12],
         type: 'bar',
         barWidth: 15,
         itemStyle: {
             normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#2788FB'
                       }, {
                        offset: 1,
                        color: '#0854B1'
                      }]),
                   }
         },
         label: {
             show: true,
             color: "#fff",
             position: 'top',
         },
    },
    ......
 ],

9、echarts多条柱状图间距如何缩短

在series数组元素中添加barGap属性

series: [             
     {
         name:'类型',
         data: [10, 2, 16, 8, 10, 12, 16,13,9,7,11,12],
         type: 'bar',
         barGap: '0%',
         barWidth: 15,
    },
    ......
 ],

10、y坐标轴取值范围和间隔大小如何设置

yAxis:{
              show: true,      
              name:'(%)',
              type: 'value',
              min: 0,//y轴最小值
              max: 100,//y轴最大值
              splitNumber:11,//y轴分成几个点
      }

二、折线图

1、如何给折线图节点数据添加单位

在series数组元素中label属性里添加formatter属性

series: [
            {
            type: 'line',
            yAxisIndex: 0,
            //鼠标移动到节点显示提示框中的数据格式
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            label: {
                show: true,
                color: "#fff",
                position: 'top',
                //折线节点显示的数据格式
                formatter:function(params){
                  return (params.value)+'%'
                }
            },            
            lineStyle: {color: "#04D8C9"},
            data: [40, 60, 50, 55, 70, 80, 65, 67,80,70,75,80]
            } ,
            ......
]

2、折现样式配置

 series: [
             {
                lineStyle: {
                    color: "#DBDF63",//用于设置折线颜色
                    width: 2,//折现粗细
                 },
                data: [2.0, 3.1, 3.4, 3.3, 2.89, 2.69,3.2,3.5,2.99,3.43,3.66],
                type: 'line',
                symbol:'circle',//用于设置形状如: circle、rect、roundRect、triangle等
                symbolSize:[8,8],//用于设置大小,[8,8] 表示symbol的宽为8，高为8。可以简写为symbolSize:8
                itemStyle:{
                        color:'#DBDF63',//用于设置折线图上坐标点颜色
                 }
             }
  ],

3、echarts如何添加标题

this.option1 = {
          
            title: [
                {
                    left: 'center',//标题位置设置
                    top: 15,//标题位置设置
                    text: '主标题',
                    textStyle:{
                        color:'#0CFFFF',//标题颜色
                    },
                   
                },
                {
                    right: 20,//标题位置设置
                    top: 40,//标题位置设置
                    text: '副标题',
                    textStyle:{
                        color:'#ffffff',
                        fontWeight:'normal',//标题字体粗细'normal','bold','bolder','lighter',数值：100-700
                        fontSize: 15,//标题字体大小
                    },
                },
            ],
}

4、折线图拐点隐藏

添加 symbol: "none"配置

 series: [   
            {
              name: "类别",
              type: 'line',
              symbol: "none",//不显示拐点
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' %';
                }
              },
              label: {
                show: false,
                color: "#fff",
                position: 'top',
                formatter:function(params){
                  return (params.value)+'%'
                }
              },           
              lineStyle: {color: "#6BC5E7"},
              data: [1.2, 1.6, 0.3, 0.4, 0.1, 0.6, 0.7, 0.9, 0.7, 0.2, 0.3, 0.5, 0.1],
            } ,         
        ],