第一次使用Echarts,遇到了很多问题,希望哪个大神可以帮忙解决一下。
需要解决的问题是这样的:
一.柱状图
1.去掉y轴平行线
2.左侧y轴文字限制长度超出换行
二、散点图
1.文字大小和圆形大小随着value值(就是圆中数字)的大小变化
2.鼠标滑过位置错乱了,就是滑过的位置和显示的位置不一样
附上我的代码,希望有人能解决。
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
//初始化数据
var category = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];
var barData = [3100, 2142, 1218, 581, 431, 383, 163];
var option = {
grid: {
top: '0.5%',
left: '3%',
right: '11%',
bottom: '2.5%',
containLabel: true
},
yAxis: [{
type: 'category',
data: ['去朋友家做客', '不歧视别人', '居家安全小常识1', '到亲戚家串门', '到亲戚家串门02', '生日派对礼仪多04', '生日派对礼仪多03', '居家安全小常识06', '生日派对礼仪多05'],
inverse: true,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 24,
color: 'white'
}
},
axisLine: {
lineStyle: {
color: '#19B6FF'
}
},
}],
xAxis: [{
}],
series: [{
name: 'Top 10',
type: 'bar',
barWidth: 40,
data: [800, 700, 600, 650, 500, 460, 400, 300, 800, 800],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: 'white', //color of value
fontSize: 30
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(25,182,255,0)' ,// 0% 处的颜色
},{
offset: 0.5,
color: 'rgba(25,182,255,1)' ,// 0% 处的颜色
},{
offset: 1,
color: 'rgba(25,182,255,1)' // 100% 处的颜色
}], false),
barBorderRadius: [0, 15, 15, 0],
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 3,
shadowOffsetY: 3
}
}
}]
};
myChart.setOption(option);
/**
* 热门打卡
*/
var MyScatter = echarts.init(document.getElementById('sandiantu'));
var plantCap = [{
name: '遵守说好的事情',
value: '157'
}, {
name: '养成好记性',
value: '115'
}, {
name: '公共场合要安静',
value: '113'
}, {
name: '有礼貌的打招呼',
value: '95'
}, {
name: '爱惜公共财物',
value: '92'
}, {
name: '衣冠整齐得体',
value: '87'
}, {
name: '自己收拾房间',
value: '87'
}, {
name: '遵守交通规则',
value: '60'
}];
var datalist = [{
offset: [20, 85],
symbolSize: 220,
color: '#FE4D90'
}, {
offset: [45, 72],
symbolSize: 190,
color: '#00D0B6'
}, {
offset: [74, 80],
symbolSize: 210,
color: '#5397F4'
}, {
offset: [30, 50],
symbolSize: 290,
color: '#5397F4'
}, {
offset: [60, 35],
symbolSize: 200,
color: '#FE4D90'
}, {
offset: [78, 50],
symbolSize: 220,
color: '#F4B304'
}, {
offset: [30, 10],
symbolSize: 220,
color: '#00D0B6'
},{
offset: [75, 15],
symbolSize: 190,
color: '#FE4D90'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize:30,
color:'#fff'
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
}
},
})
}
option1 = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
borderWidth: '0',
borderType: 'solid',
borderColor: '#fff',
color: '#68b837',
shadowColor: '#68b837',
shadowBlur: 10
}
},
data: datas
}]
};
MyScatter.setOption(option1);