常见echarts属性简介

一、柱形图

1.渐变内置生成器

 let arr = [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#289DF4' },
                    { offset: 1, color: '#4A82FA' }
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3ECA8B' },
                    { offset: 1, color: '#43CB54' }
                ])
            ]

2.一级标题 二级标题

             title: [
                	{
                		text: this.title,
                		textStyle: { color: '#fff', fontSize: '21px' },
                		top: 12
                	},
                	// 控制二级标题的位置
                	{
                		subtext: this.secondtitle,
                		// padding: [110, 20, 0, 0]
                		x: '100px',
                		top: 5
                		// y: '152px'
                	}
                ],

3.tooltip提示框

             tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        let params0 = params[0],
                            params1 = params[1]
                        return `  里面写html
                        <div style="background: rgba(0,0,0,0.8);border:0;color:#fff;text-align: left;width:100px">
                        <div class="flex justify-content-space-between">
                        </div>
                     </div>`
                    },
                    borderColor: 'rgba(0,0,0,0.80)', // 提示框边框
                    borderWidth: 0,
                    backgroundColor: 'rgba(0,0,0,0.80)', // 提示框背景
                    axisPointer: {
                        type: 'shadow'
                    }
                },
              //提示框取默认值，即鼠标移动到柱状图会显示内容
			tooltip: {
			    trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
			    axisPointer: {  //坐标轴指示器，坐标轴触发有效，
			        type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
					crossStyle: {
			            color: '#fff'
					}
				}
			}
			 tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        label: {
                            // 控制自动播放时候，y轴显示的刻度是整数
                            // precision: 0,
                            // color: '#fff',
                            // backgroundColor: 'none',
                            fontSize: 14,
                            // 负数零的修改
                            formatter: params => {
                                if (typeof params.value == 'number') {
                                    params.value = ''
                                    return params.value
                                } else {
                                    return params.value
                                }
                            }
                        }
                    },
                    borderColor: 'rgba(0,0,0,0.80)', // 提示框边框
                    borderWidth: 0,
                    backgroundColor: 'rgba(0,0,0,0.80)', // 提示框背景
                    formatter: params => {
                        return ''
                    }
                },

4.图例属性legend

            legend: {
                    show: false, //是否显示
                    data: ['浦东', curCity]
                },

4.xAxis yAxis

           // show: true, //控制x轴刻度个数是否自动缩放
                    axisTick: { show: false }, //坐标轴刻度相关设置
                    axisLabel: {
                        //坐标轴刻度标签
                        interval: 0,
                        textStyle: {
                            fontSize: '10'
                        },
                        //设置x轴刻度的字体大小
                        fontSize: 12,
                        color(value, index) {
                                return index == 1 ? '#fff' : '#888'
                         },
                         formatter(value) {
                                return Math.abs(value) // 负数取绝对值变正数（x轴本来数据是正负才能分开两边展示的，所以我们只是把负数处理为正数在视觉上显示）
                            }
                    },
                    axisLine: {
                        show: true // 是否显示坐标轴轴线。
                    },
                    splitNumber:3,//y轴刻度的个数
                    boundaryGap: false, //x坐标两头留空白
                    splitLine: {
                        //网格线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#113d5e'
                        }
                    },

4.grid

            grid: {
                    left: 20,
                    x: 0,
                    y: 10,
                    x2: 10,
                    y2: 0,
                    containLabel: true,
                    show: true, //
                    borderWidth: '1', //边框宽度
                    borderColor: '#0f3781' //边框颜色
                },

4.series

                  itemStyle: {
                            normal: {
                                color: '#5497ff'
                            },
                            //鼠标经过有高亮显示
                            emphasis: {
                                color: '5cb9fe'
                            }
                        },

二、折线图

1.series

                   itemStyle: {
                            normal: {
                                color: '#5497ff'
                            }
                        },
                        // 折线图的宽
                        lineStyle: { width: 1 },
                        // 阴影部分颜色
                        areaStyle: {
                            color: 'rgba(212, 247, 202, 0.3)'
                        },
                        showSymbol: false, //隐藏数据节点

二、树图

1.series

                      initialTreeDepth: 2, //节点的深度
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 12,
                            color: '#89DEFF' //字体颜色
                        },
                        itemStyle: {
                            color: '#89DEFF' //选中节点图标颜色
                        },
                        lineStyle: {
                            color: '#979797' //线的颜色
                        },

                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left',
                                color: '#979797' //文字未选中的颜色
                            },
                            itemStyle: {
                                borderWidth: 1,
                                color: '#979797' //节点图标未选择颜色
                            }
                        },
                        // symbol: 'emptyCircle',
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750

链接: https://blog.csdn.net/weixin_44897255/article/details/96877562.
链接: https://www.cnblogs.com/zqq-blog/p/10636102.html.
链接: https://blog.csdn.net/qq_30264689/article/details/80911974.
链接: https://blog.csdn.net/weixin_38196055/article/details/107999883.