var myChart = echarts.init(document.getElementById('weixiu'));
var cost = [0.42, 0.53, 0.62, 0.83, 0.96]//柱状图长度
var dataCost = [420,760,810,760,810]//
var totalCost = [1, 1, 1, 1, 1]//
var visits = [420, 530, 602, 853, 963]//数据
var grade = ['AP', '低压配电室', '风机', '空调', '摄像头']
var colorList = [
['#BC3535','#FF5B79'],
['#8D3510','#FFA783'],
['#651180','#D099FF'],
['#00CCFF','#2953B4'],
['#8D104B','#FF83D8'],
['#7F610F','#FFE899'],
['#00CCFF','#2953B4']
];
var data = {
title: "设备",
grade: grade,
cost: cost,
totalCost: totalCost,
visits: visits,
dataCost:dataCost,
colorlist1:colorlist1
};
var option = {
// backgroundColor: '#05274C',
/* title: {
top: '5%',
left: 'center',
text: data.title + '维修次数统计',
textStyle: {
align: 'center',
color: '#4DCEF8',
fontSize: 18
}
}, */
grid: {
left: '240',
right: '100'
},
xAxis: {
show: false,
},
yAxis: {
type: 'category',
axisLabel: {
margin: 100,
show: true,
color: '#4DCEF8',
fontSize: 14
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.grade
},
series: [{
type: 'bar',
barGap: '-98%',
barWidth: '25%',
label: {
normal: {
show: true,
position: 'right',
color: '#fff',
fontSize: 14,
formatter:
function(param) {
return data.visits[param.dataIndex] ;
},
}
},
itemStyle: {
normal: {
barBorderRadius: 16,
color: function(params){
var colorItem = colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(1,0,0,0,[
{
offset:0,
color:colorItem[0]
},
{
offset:1,
color:colorItem[1]
}
],false);
}
},
},
max: 1,
labelLine: {
show: true,
},
z: 2,
data: data.cost,
}]
}
myChart.setOption(option);
详细解决方案
echarts图柱状图颜色渐变样式
热度:40 发布时间:2023-10-12 15:08:45.0
相关解决方案
- echarts 怎么动态的添加折线图中的series
- Echarts,饼图中如何对数据进行判断,或者说如何去掉数据为零的lableline
- ECharts 全新大版本 4.0 正式发布 即将支持微信小程序中使用ECharts
- echarts.init报错
- Echarts.js的简单方法归类
- echarts legend太多换行显示及legend每个标签文字过长分两行显示的间距调整问题
- 六月工作总结——Echarts
- Echarts-折线图-多条线
- echarts 动态数据改变时, 原数据依然存在图表上,没有刷新
- echarts x 轴文本旋转
- echarst环形进度,官网https://echarts.apache.org/examples/zh/index.html
- ECharts 定制 label 样式单独加颜色
- Highcharts、Echarts、D3、该用哪个
- ngx-echarts legend点击不置灰
- 有了 echarts 还需要报表工具吗?
- 在报表中可以使用 ECharts 做图形展现吗?
- echarts tooltip formatter添加图片
- Echarts - lengend图例自定义
- echarts tooltip被遮挡
- eCharts+mapbox获取mapbox实例
- echarts 饼图 labelLine
- echarts 保存图片时给背景加上颜色
- ECharts 折线图使用教程
- echarts 当图形与文字重合时,调整透明度