百度echarts 在柱状图折线图饼图上显示y轴对应的数据以及图形是否能够拖动的设置

最新推荐文章于 2024-05-10 16:50:04 发布

原创最新推荐文章于 2024-05-10 16:50:04 发布 · 6.1k 阅读

0 ·

CC 4.0 BY-SA版权

javaweb 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Echarts的柱状图、折线图和饼图上显示Y轴对应的数据。对于折线图，可以通过在series中设置itemStyle的label和labelLine来实现数据展示。对于柱状图，同样通过series配置可显示Y轴数据。另外，调整calculable属性可以控制图形是否可拖动，将calculable设为false可禁用拖动功能。

对echart 图标y 轴的数据进行显示。主要时在 series 加入

 itemStyle: { normal: {label : {show: true ,position: ‘inside’}}},

就可以显示Y 轴的数据了，具体操作如下：

折线图：

series: [
            { 
  name: 'xx',
  type: 'line',
 itemStyle: { normal: {label : {show: true ,position: ‘inside’}}},
data:xxxx
}]```

饼图：

series: [
{
name: xxx,
type: ‘pie’,
itemStyle: {
normal: {
label: {
show: true,
formatter: ‘{b} : {c} \n ({d}%)’
},
labelLine: {
show: true
}
}
},
radius: ‘55%’,
data: [
{value: xxx, name: xx},
{value: xx, name: xx},

            ]
        }
    ]```

柱状图

 series: [
                    {
                        name: 'xx',
                        type: 'bar',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}, label: {show: true, position: 'insideTop'}}},
                        data: data.xx,

                    },
                    {
                        name: 'xx',
                        type: 'bar',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}, label: {show: true}}},
                        data: data.xxx,

                    }


                ]