Echart 常见问题

怕冷的火焰（~杰）

已于 2024-01-09 10:37:22 修改

阅读量1.1k

点赞数

分类专栏： Echart 文章标签： echarts

于 2022-06-01 09:46:27 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/125078075

版权

Echart 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

tooltip 显示百分号

// tooltip 显示百分号

tooltip: {
    trigger: 'axis',
    formatter: params => {
        let html = `${params[0].name}<br>`;
        for (let i = 0; i < params.length; i++) {
            html += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color};"></span>`;
            html += `${params[i].seriesName}:${params[i].value}%<br>`;
        }
        return html;
    }
},

// y轴数字显示百分比
yAxis: {
    type: 'value',
    minInterval: 1,
    axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}%' // 给每个数值添加%
    }
},

// x轴日期切换（如何隔一天显示一个或者显示所有天数）
xAxis: {
    axisLabel: {
        interval: '0' // 0表示全部显示 auto表示日期隔一天显示一次 
    }
}

x或y轴文字描述过长时显示省略号

// x或y轴文字描述过长时显示省略号

xAxis: [
    {
        type: 'category',
        data: [],
        axisLable: {
            show: true,
            interval: 0,
            formatter: function (value) {
                if (value.length > 4) { // 超过4个字显示省略号
                      return `${value.slice(0, 4)}...`;
                }
                return value;
            }
        }
    }
]

修改折线图颜色

// 修改折线图颜色:lineStyle和itemStyle必须一起修改
series: [
    {
        name: '预计工时',
        type: 'line',
        data: [100, 50, 70],
        lineStyle: {// 设置线条的style等
            normal: {
                color: 'red', // 折线线条颜色:红色
            },
        },
        itemStyle: {
            // 设置线条上点的颜色（和图例的颜色）
            normal: {
                color: 'red',
            },
        },
           
    }
]

横坐标或纵坐标只显示整数位

// 横坐标或纵坐标只显示整数位
xAxis: {
    minInterval: 1
}

两Y轴坐标刻度线不对齐

// 解决两Y轴坐标刻度线不对齐
option.yAxis[0].max=Math.ceil(Math.max.apply(null,option.series[0].data)/5)*5 || 10;
option.yAxis[0].interval=Math.ceil(Math.max.apply(null,option.series[0].data)/5) || 2;

option.yAxis[1].max=Math.ceil(Math.max.apply(null,option.series[1].data)/5)*5 || 10;
option.yAxis[1].interval=Math.ceil(Math.max.apply(null,option.series[1].data)/5) || 2;

option.yAxis[0].min=0;
option.yAxis[1].min=0;

鼠标移入显示区域不是折现样式而是柱形图浮层样式

// 鼠标移入显示区域不是折现样式而是柱形图浮层样式
xAxis: [{
    axisPointer: {
        type: 'shadow'
    }
}]

X坐标轴两边留白以及取消刻度线

xAxis: {
    boundaryGap: false, // 默认值为true, 两边留白
    axisTick: {
        show:false // 取消刻度线
    }
}

折线图添加渐变背景色

一、设置折线颜色: 在series中，设置lineStyle属性。
lineStyle: {
    color: '#556FFD'   
}

二、设置折线拐点大小：在series中使用symbol属性、symbolSize属性
symbol: 'circle', // 拐点的形状
symbolSize: 6, // 拐点大小

三、设置折线拐点颜色（hover折现点颜色）：在series中，使用itemStyle属性、emphasis属性。
itemStyle: {
    // 设置线条上点的颜色（和图例的颜色）
    normal: {
        color: '#556FFD',
     },
},
emphasis: {
    // 鼠标hover上去的时候，拐点的颜色和样式
    itemStyle: {
        color: '#556FFD', // 颜色
            borderColor: '#556FFD', // 图形的描边颜色
                borderWidth: 1 // 描边的线宽
    }
}

四、设置折线渐变颜色：在series中，使用areaStyle属性。
areaStyle: {
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [  // 渐变颜色
            {
                offset: 0,
                color: 'rgba(85,111,253,0.50)',
            },
            {
                offset: 1,
                color: 'rgba(85,111,253,0.00)',
            },
        ],
        global: false,
    }
}


具体演示代码如下：

series: [
    {
        name: '接通率',
        type: 'line',
        stack: 'dialogTotalNum',
        sumtotal: 178,
        lineStyle: {
            // 设置折线颜色
            color: '#3041FB'
        },
        itemStyle: {
            // 设置线条上点的颜色（和图例的颜色）
            normal: {
                color: '#3041FB'
            }
        },
        emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
                color: '#3041FB', // 颜色
                borderColor: '#3041FB', // 图形的描边颜色
                borderWidth: 1 // 描边的线宽
            }
        },
        areaStyle: {
            // 设置折线下方渐变颜色
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    // 渐变颜色
                    {
                        offset: 0,
                        color: 'rgba(48,65,251,0.16)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(48,65,251,0.00)'
                    }
                ],
                global: false
            }
        },
        data: [1, 0, 7, 4]
    },
    {
        name: '拒接率',
        type: 'line',
        stack: 'effectiveDialogTotalNum',
        sumtotal: 46,
        lineStyle: {
            color: '#01D380'
        },
        itemStyle: {
            // 设置线条上点的颜色（和图例的颜色）
            normal: {
                color: '#01D380'
            }
        },
        emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
                color: '#01D380', // 颜色
                borderColor: '#01D380', // 图形的描边颜色
                borderWidth: 1 // 描边的线宽
            }
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    // 渐变颜色
                    {
                        offset: 0,
                        color: 'rgba(1, 211, 128,0.16)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(1, 211, 128,0.00)'
                    }
                ],
                global: false
            }
        },
        data: [1, 0, 7, 4]
    },
    {
        name: '平均通话时长',
        type: 'line',
        stack: 'independentDialogNum',
        sumtotal: 122,
        lineStyle: {
            color: '#FAD337'
        },
        itemStyle: {
            // 设置线条上点的颜色（和图例的颜色）
            normal: {
                color: '#FAD337'
            }
        },
        emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
                color: '#FAD337', // 颜色
                borderColor: '#FAD337', // 图形的描边颜色
                borderWidth: 1 // 描边的线宽
            }
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    // 渐变颜色
                    {
                        offset: 0,
                        color: 'rgba(250, 211, 55,0.16)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(250, 211, 55,0.00)'
                    }
                ],
                global: false
            }
        },
        data: [1, 0, 7, 4]
    },
    {
        name: '意向率',
        type: 'line',
        stack: 'independentEffectiveDialogNum',
        sumtotal: 29,
        lineStyle: {
            color: '#57AEFE'
        },
        itemStyle: {
            // 设置线条上点的颜色（和图例的颜色）
            normal: {
                color: '#57AEFE'
            }
        },
        emphasis: {
            // 鼠标hover上去的时候，拐点的颜色和样式
            itemStyle: {
                color: '#57AEFE', // 颜色
                borderColor: '#57AEFE', // 图形的描边颜色
                borderWidth: 1 // 描边的线宽
            }
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    // 渐变颜色
                    {
                        offset: 0,
                        color: 'rgba(87, 174, 254,0.16)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(87, 174, 254,0.00)'
                    }
                ],
                global: false
            }
        },
        data: [1, 0, 7, 4]
    }
]

柱状图上方显示数字

series: [{
    name: '人数',
    type: 'bar',
    data: [],        //x轴对应列的值
    itemStyle: {        //上方显示数值
        normal: {
            label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: { //数值样式
                    color: 'black',
                    fontSize: 16
                }
            }
        }
    }
}]

配置title标题字体颜色样式修改

title:{
    //1.标题居中
    //left的值为'left', 'center', 'right'
    left:'center',
    //默认为10
    //2.主副标题之间的间距
    itemGap:20,
    3.标题文本样式   
     text:'标题文本',
     textStyle:{
        //文字颜色
        color:'#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle:'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight:'bold',
        //字体系列
        fontFamily:'sans-serif',
        //字体大小
　　　　 fontSize:18
    }
    //4.副标题
    subtext:'副标题',
　　//副标题文本样式
　　subtextStyle:{},
   //5.grid组件离容器左侧的距离。
   // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
   //如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
   left:'center'  
}

柱状图颜色修改以及在上方显示数值

series: [{
    name: '你好',
    data: [
        {
            value: 11,
            // 设置柱状图背景颜色
            itemStyle: {
                color: '#010000'
            }
        }
    ],
    type: 'bar',
    itemStyle: {
        // 上方显示数值
        normal: {
            label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 16
                }
            }
        }
    }
}]

实现两y轴多折线图且实现多个折线的颜色

const option = {
  grid: {
    left: '10%',
    right: '10%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: [
    {
      type: 'value',
      name: 'Y轴1',
    },
    {
      type: 'value',
      name: 'Y轴2',
    },
  ],
  series: [
    {
      name: '数据1',
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130],
      yAxisIndex: 0, // 使用第一个Y轴
      itemStyle: {
        color: 'red', // 自定义折线颜色
      },
    },
    {
      name: '数据2',
      type: 'line',
      data: [50, 80, 60, 90, 120, 100, 80],
      yAxisIndex: 1, // 使用第二个Y轴
      itemStyle: {
        color: 'blue', // 自定义折线颜色
      },
    },
    // 添加更多的系列对象...
  ],
};

const App = () => {
  return <ReactECharts option={option} />;
};

export default App;

X轴字体旋转60°（斜字体）

xAxis: {
        axisLabel: { rotate: 60 } // 设置X轴标签倾斜角度为60度
}

怕冷的火焰（~杰）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录