**
eacharts双柱状图加渐变色
**
废话不多说,直接上代码
import * as echarts from "echarts";
var newchartName = ["理论课/课时", "实训课/课时", "总课时"],
newchartValue1 = ["20", "138", "158"],
newchartValue2 = ["20", "672", "692"];
var barWidth = 40;
`` option: {
grid: {
top: "10%",
left: "5%",
bottom: "10%",
right: "2%",
containLabel: true
},
legend: {
data: ["培训一部", "培训二部"],
icon: "roundRect",
right: "1%",
top: "2%",
textStyle: {
fontSize: 14, //字体大小
color: "#ffffff" //字体颜色
}
},
animation: false,
xAxis: [
{
type: "category",
axisTick: {
show: true
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(0,228,255,1)"
}
},
axisLine: {
show: false,
//这是y轴文字颜色
lineStyle: {
color: "#cccccc"
}
},
axisLabel: {
show: true,
interval: 0, //强制显示文字
textStyle: {
color: "#CCCCCC", //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
},
margin: 20 //刻度标签与轴线之间的距离。
},
axisTick: {
show: false
},
data: newchartName
},
{
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: newchartName
}
],
yAxis: [
{
show: true,
type: "value",
min: 0,
max: 800,
interval: 100,
// 去掉Y轴刻度
axisTick: {
show: false
},
axisLine: {
show: false,
//这是y轴文字颜色
lineStyle: {
color: "#CCCCCC"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#CCCCCC", //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
// 横线的颜色
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#2A5352"]
}
}
}
],
series: [
{
// 第一个柱子的顶部
name: "培训一部",
type: "pictorialBar",
symbolSize: [barWidth, 10],
symbolOffset: ["-81%", -5],
symbolPosition: "end",
z: 15,
zlevel: 2,
data: newchartValue1,
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#099575" //指0%处的颜色
},
{
offset: 1,
color: "#5CE0D1" //指100%处的颜色
}
],
false
)
},
{
// 第二个柱子的顶部
name: "培训二部",
type: "pictorialBar",
symbolSize: [barWidth, 10],
symbolOffset: ["81%", -5],
symbolPosition: "end",
z: 15,
zlevel: 2,
data: newchartValue2,
// color: "#DB6C0D",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#DB6C0D" //指0%处的颜色
},
{
offset: 1,
color: "#F7A055" //指100%处的颜色
}
],
false
)
},
{
name: "已开工已完成",
type: "bar",
barGap: "60%",
barWidth: barWidth,
itemStyle: {
borderWidth: 1,
borderType: "solid",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#099575" //指0%处的颜色
},
{
offset: 1,
color: "#5CE0D1" //指100%处的颜色
}
],
false
)
},
label: {
show: true,
formatter: "{c}",
position: "top",
color: "pink",
fontSize: 12,
textAlign: "center"
},
zlevel: 2,
data: newchartValue1
},
{
// 第二个柱子的中间
name: "已完成已合格",
type: "bar",
barGap: "60%",
barWidth: barWidth,
itemStyle: {
// color: 'rgba(255,164,41,.16)',
// color: color2,
// borderColor: color2,
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#DB6C0D" //指0%处的颜色
},
{
offset: 1,
color: "#F7A055" //指100%处的颜色
}
],
false
),
borderWidth: 1,
borderType: "solid"
},
label: {
show: true,
formatter: "{c}",
position: "top",
color: "pink",
fontSize: 12,
textAlign: "center"
},
zlevel: 2,
data: newchartValue2
},
{
// 第一个柱子的底部
name: "已开工已完成",
type: "pictorialBar",
symbolSize: [barWidth, 10],
symbolOffset: ["-81%", 5],
z: 12,
color: "#5CE0D1",
data: [
{
name: "",
value: "100"
},
{
name: "",
value: "100"
},
{
name: "",
value: "100"
}
]
},
{
// 第二个柱子的底部
name: "已完成已合格",
type: "pictorialBar",
symbolSize: [barWidth, 10],
symbolOffset: ["81%", 5],
z: 12,
color: "#F7A055",
data: [
{
name: "",
value: "100"
},
{
name: "",
value: "100"
},
{
name: "",
value: "100"
}
]
}
]
},
还有这一步啊
在mounted里面
```html
var myChart = echarts.init(document.getElementById("right_left_echarts"));
myChart.setOption(this.option);