搜索

Help

第43页,共248页。 显示 2,478 条结果 (0.495 秒)

  1. Echarts图形-扩展属性:数据标签 - 堆积柱图数据项标签居上被覆盖

    (本文档仅供参考) 问题 堆积柱图数据项标签设置居上时部分标签被覆盖,悬停的时候才会出现 设置.png 设置前.png 解决方案 此问题为由第三方作图工具echarts的处理逻辑导致,可不设置数据项标签并使用以下扩展属性进行规避。 { "series": [{ "name": "销售额", "type": "bar", "stack": "总量", "barMaxWidth": 35, "barGap": "10%", "itemStyle": { "normal": { "color": "rgba(255,144,128,1)", "label": { "show": true, "textStyle":
    FAQ中心六月 19, 2025
  2. Echarts图形-扩展属性:缩略轴 - 仪表盘对比柱图设置缩略轴

    (本文档仅供参考) (该扩展属性代码已验证适用于echarts 5.1.2版本。由于代码在特定场景下可能存在限制,如果与实际应用场景不完全匹配,请根据具体需求自行调整相关代码,以确保其满足实际使用要求。) 问题 v11中的对比柱图组件,如何添加缩略轴来实现数据滚动展示,不然内容有点多显示不全,同时调整柱子粗细便于浏览。 image2024-11-6_16-24-57.png 解决方案 对比柱图是通过3个Y轴实现的,可在对比柱图上加上以下扩展属性即可。 option = { "series": [{ "barWidth": 10 }, { "barWidth": 10 }], "dat
    FAQ中心六月 19, 2025
  3. Echarts图形-扩展属性:柱子 - 调整仪表盘对比柱图左右柱子间距

    (本文档仅供参考) 问题描述 如下图,V11仪表盘中使用对比柱图组件,有时候数据标签跟刻度标签靠的太近了,希望调整左右柱子的间距。 image2024-12-19_14-2-45.png 解决方案 由于对比柱图组件是定义了三个grid区域、三个x轴以及三个y轴,故调整左右柱子间隔可直接通过设置grid区域数组控制。 参考如下扩展属性: option = { grid: [{ "right": "53%" }, { "left": "53%" }, {}], } image2024-12-19_14-7-52.png 调整效果: image2024-12-19_14-8-17.png
    FAQ中心六月 19, 2025
  4. Echarts图形-扩展属性:鼠标提示 - 柱图鼠标提示换行显示

    (本文档仅供参考) 问题 如何实现柱图鼠标提示换行显示? 解决方案 可以用以下扩展属性实现: { "tooltip": { "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.name+'</br>'+a.data.value[1]}" } } 效果图如下: image2018-11-5 14:39:56.png 鼠标提示换行
    FAQ中心六月 19, 2025
  5. Echarts图形-扩展属性:鼠标提示 - 柱图鼠标提示背景设置渐变色

    (此文档仅供参考) 问题 柱图鼠标提示背景设置渐变色 image2022-12-6_19-35-47.png 解决方案 可以使用扩展属性实现 { "tooltip": { "trigger": "axis", "extraCssText": "background: linear-gradient(0deg, #19263B 0%, #FF0000 100%);" //0deg从上往下渐变,270deg从左往右渐变色,#19263B,#FF0000分别为渐变的颜色 } } 鼠标提示框背景渐变
    FAQ中心六月 19, 2025
  6. Echarts图形-扩展属性:进度条 - 柱图实现进度条的效果

    (本文档仅供参考) 问题: 希望柱图显示为进度条的效果 解决方案 具体请参考如下扩展属性: { "series": [{ "type": "bar", "barWidth": "12%", "itemStyle": { "normal": { "color": "red", "barBorderRadius": 20, "label": { "show": true, "t
    FAQ中心六月 19, 2025
  7. Echarts图形-扩展属性:鼠标提示 - 同系列柱图鼠标提示

    (本文档仅供参考) 问题 做好柱图后,想实现鼠标移入后同系列柱图鼠标提示都显示出来,如下图: image2018-11-7 21:30:13.png 实现方案 需要写扩展属性即可完成,相关的属性可以上echarts官网查看,http://echarts.baidu.com http://echarts.baidu.com/,此示例的扩展属性如下 { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' 'shadow'
    FAQ中心六月 19, 2025
  8. Echarts图形-扩展属性:鼠标提示 - 堆积柱图取消某项指标鼠标提示

    (此文档仅供参考) 现象 在做堆积柱图时有时想隐藏某项鼠标提示,例如图中,鼠标移入销售额上显示,导入销售量不显示。 Animation.gif 实现方法 需要写扩展属性实现,而扩展属性中如果需要隐藏销售量,那么就得写在第一个括号内,如果在销售额的下方,就需要写在第二个括号内,如图: { "series": [{ "tooltip": { "showContent": false } }, {}] } image2018-11-11 18:4:5.png image2018-11-11 18:5:37.png 取消某个柱图的鼠标提示
    FAQ中心六月 19, 2025
  9. Echarts图形-扩展属性:柱子 - 堆积柱图标签为0时不显示

    (本文档仅供参考) 问题: 堆积柱图显示标签的时候,如何让数据为0的标签不显示。 解决方案: 可参考如下扩展属性实现。 { series: [ { itemStyle: { normal: { label: { formatter: "function (params) {if (params.value[0] !== 0) {return params.value[0]; } else { return ''; } }" }
    FAQ中心六月 19, 2025
  10. Echarts图形-扩展属性:折线 - 堆积线图自定义各数据点样式

    (本文档仅供参考) 问题描述 堆积线图中有多条折线,想要自定义各数据点样式。 image2024-12-5_16-58-45.png 解决方案 可参考以下扩展属性 option = { series: [{ showSymbol: true, symbol: 'circle', //设定为实心点 symbolSize: 0, //设定实心点的大小 color: "#000", //设定实线点的颜色 lineStyle: { normal: { width: 2, color: "#0000ff", //设置实线的颜色
    FAQ中心六月 19, 2025