jsecharts如何改变占比_echarts横向柱状图用来表示分类占比，切角效果如何实现...

最新推荐文章于 2023-11-17 16:43:34 发布

weixin_39575170

最新推荐文章于 2023-11-17 16:43:34 发布

阅读量359

点赞数

文章标签： jsecharts如何改变占比

本文链接：https://blog.csdn.net/weixin_39575170/article/details/111728219

版权

本文介绍了如何使用ECharts库创建一个柱状图，特别是关注如何实现柱状图的切角效果和调整不同分类的占比。通过修改ECharts配置项，包括`barBorderRadius`、`color`、`LinearGradient`等，可以达到预期的视觉效果，同时展示了`name`为'愿意'和'不愿意'的数据项设置。

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

想要实现的效果

目前以下代码实现的效果

救救孩子吧，实在不知道怎么写了

var option = {

color:['#509AFD','#FC5249'],

backgroundColor: '#fff',

title: {

text: '客户意愿'

grid: {

left: 300,

right: 200

xAxis: {

type: 'value',

show: false,

axisLabel:{

rotate:45,

yAxis: {

type: 'category',

show: false

series: [{

name: '愿意',

data: [70],

formater(val){

console.log("愿意："+val)

type: 'bar',

stack: '总量',

barWidth: 30, //柱子宽度

cursor: 'default',

itemStyle: {

borderWidth: 30,

borderStyle: 'solid',

borderColor: '#FFFFFF',

color: '#16A9E6',

normal: {

barBorderRadius: [0, 0, 100, 0],//lt,rt,rb,lb

color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[

{offset: 0, color: '#3977E6'},

{offset: 1, color: '#37BBF8'}]

)

}

label: {

show: true,

padding: [0, 0, 40, 0],

fontSize:16,

color: '#333333',

{

name: '不愿意',

data: [99],

type: 'bar',

stack: '总量',

barWidth: 30,

cursor: 'default',

itemStyle: {

borderWidth: 3,

borderStyle: 'solid',

borderColor: 'transparant',

color: '#05A07D',

normal: {

barBorderRadius: [100, 0, 0, 0],//lt,rt,rb,lb