一、柱状图
const option = {
color: ['#D1E5FD','#1B7BF7'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: 0,
itemWidth: 10,
itemHeight: 10,
itemGap: 40
// padding: [5, 20]
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#D1DBE7',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#677C97',
fontSize: 14
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#D1DBE7'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#677C97',
fontSize: 14
},
splitLine: {
lineStyle: {
color: ['#E8EDF4'],
type: 'dashed'
}
}
}
],
series: [
{
name: '总数',
type: 'bar',
z:"-1",
barGap: '-100%',
emphasis: {
disabled: false,
focus: 'self',
itemStyle: {
color: '#D1E5FD'
}
},
barWidth: 40,
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '完全正确数量',
type: 'bar',
// stack: '总数',
emphasis: {
disabled: false,
focus: 'self',
itemStyle: {
color: '#1B7BF7'
}
},
barWidth: 40,
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};二、条形图
const data = {
totalList: [120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120],
correctList: [90,100,110,70,80,80,90,60,70,80,70,60,80,70,50,90,70]
}
const option = {
color: ['#E3EEFF','#6D9BFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: 10,
itemWidth: 10,
itemHeight: 10,
itemGap: 40
// padding: [5, 20]
},
grid: {
left: '3%',
right: '4%',
top: '3%',
bottom: '6%',
containLabel: true
},
xAxis: [
{
type: 'value',
// data: data.timeList,
axisLine: {
lineStyle: {
color: '#D8E7FF'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#405B84'
}
}
],
yAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#D8E7FF'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#405B84'
},
splitLine: {
show: false,
lineStyle: {
color: ['#E8EDF4'],
type: 'dashed'
}
},
data: ['张丽莉','张丽丽','张嘉欣','李童','赵佳佳','孙丽','张力','张丽莉','张丽丽','张嘉欣','李童','赵佳佳','孙丽','张力','顾晓晓','李淑芳','孙玉明']
}
],
series: [
{
name: '总数',
type: 'bar',
z:"-1",
barGap: '-100%',
emphasis: {
disabled: false,
focus: 'self',
itemStyle: {
color: '#D1E5FD'
}
},
barWidth: 16,
itemStyle: {
emphasis: {
barBorderRadius: 9
},
normal: {
barBorderRadius: 9
}
},
data: data.totalList
},
{
name: '完全正确数量',
type: 'bar',
// stack: '总数',
emphasis: {
disabled: false,
focus: 'self',
itemStyle: {
color: '#1B7BF7'
}
},
barWidth: 16,
itemStyle: {
emphasis: {
barBorderRadius: 9
},
normal: {
barBorderRadius: 9
}
},
data: data.correctList
}
]
};
3D柱形图
initChart2() {
this.chart2 = echarts.init(this.$refs["echart2"]);
//组织数据
let setData = function (data, constData, showData) {
data.filter(function (item) {
if (item) {
constData.push(1);
showData.push(item);
} else {
constData.push(0);
showData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
}
});
};
//组织颜色
let setColor = function (colorArr) {
let color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
/* 此处决定阴暗面 若为横向柱状图则x,y轴调换
x: 0,
x2: 0,
y: 0,
y2: 1, */
colorStops: [
{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
};
return color;
};
// var vehicle = [45, 25, 48, 62, 35];
// var controlBall = [23, 12, 52, 14, 9];
var vehicle = [45, 25, 48, 62, 35, 72, 21, 12, 52, 14, 20];
var controlBall = [23, 12, 52, 14, 9];
var barWidth = 30;
var constData1 = [];
var showData1 = [];
var constData2 = [];
var showData2 = [];
setData(vehicle, constData1, showData1);
setData(controlBall, constData2, showData2);
var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
var color1 = setColor(colorArr1);
var color2 = setColor(colorArr2);
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
// title: {
// text: "单位：公顷",
// textStyle: {
// fontSize: "14px",
// color: "rgba(255, 255, 255, 0.4)",
// fontWeight: "normal",
// },
// top: "5%",
// },
legend: {
show: false,
},
grid: {
top: "5%",
bottom: "37%",
right: '3%'
},
xAxis: {
type: "category",
axisLabel: {
color: "#fff",
interval: 0,
formatter: function (value) {
var ret = ""; //拼接加\n返回的类目项
var maxLength = 1; //每项显示文字个数
var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) {
//如果类目项的文字大于5,
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value;
}
},
// rotate: 25
},
axisLine: {
show: true,
lineStyle: {
color: "#1B3F66",
},
},
axisTick: {
show: false,
},
data: [
"大堰乡",
"都镇湾镇",
"高家堰镇",
"贺家坪镇",
"火烧坪乡",
"榔坪镇",
"龙舟坪镇",
"磨市镇",
"鸭子口乡",
"渔峡口镇",
"资丘镇",
]
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#AAACAE",
},
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
show: true,
lineStyle: {
color: "#7D7D7D",
type: "dashed",
},
},
// axisLabel: {
// color: "#FFFFFF",
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: "#1B3F66",
// },
// },
// splitLine: {
// lineStyle: {
// color: "#1B3F66",
// },
// },
},
series: [
{
z: 1,
type: "bar",
name: "柱子1",
barWidth: 16,
showBackground: true,
itemStyle: {
borderRadius: [0, 0, 0, 0], //柱子四周圆角
color: color1, //柱子左右颜色（深，浅）
},
// 柱上文字
label: {
normal: {
show: false,
position: "top",
distance: 10, //距离柱形的距离
// formatter: "{b}",
textStyle: {
color: "#fff", //映射颜色
fontSize: 16,
},
},
},
data: vehicle, //Y轴上的高度
},
{
z: 3,
name: "柱子1",
type: "pictorialBar",
symbolPosition: "end",
data: showData1, //此数据对应顶部组件
symbol: "diamond",
symbolOffset: ["0", "-50%"],
symbolSize: [18, 7], //底面[宽，高]
itemStyle: {
normal: {
/* borderColor: colorArr1[2],
borderWidth: 2, */ //加上棱角分明
color: colorArr1[2],
},
},
tooltip: {
show: false,
},
},
],
};
this.chart2.setOption(option);
// 窗口大小改变时，图表自适应
window.addEventListener("resize", this.resizeChart);
},
initChart1() {
this.chart1 = echarts.init(this.$refs["chart1"]);
const dataList = [200, 330, 120, 290, 460];
var option;
option = {
// title: {
// text: "单位：万元",
// textStyle: {
// fontSize: "14px",
// color: "rgba(255, 255, 255, 0.4)",
// fontWeight: "normal",
// },
// top: "0",
// },
grid: {
top: "13%",
left: "3%",
right: "4%",
bottom: "8%",
containLabel: true,
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01],
max: 600,
axisLine: {
show: false,
lineStyle: {
color: "#AAACAE",
},
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
show: true,
lineStyle: {
color: "#7D7D7D",
type: "dashed",
},
},
},
xAxis: {
type: "category",
data: ["造林补贴", "双重项目", "松材虫病", "油茶营造", "清江流域"],
axisLabel: {
color: "#fff",
interval: 0,
// formatter: function (value) {
// var ret = ""; //拼接加\n返回的类目项
// var maxLength = 2; //每项显示文字个数
// var valLength = value.length; //X轴类目项的文字个数
// var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
// if (rowN > 1) {
// //如果类目项的文字大于5,
// for (var i = 0; i < rowN; i++) {
// var temp = ""; //每次截取的字符串
// var start = i * maxLength; //开始截取的位置
// var end = start + maxLength; //结束截取的位置
// //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
// temp = value.substring(start, end) + "\n";
// ret += temp; //凭借最终的字符串
// }
// return ret;
// } else {
// return value;
// }
// },
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
show: false,
},
},
series: [
{
type: "bar",
itemStyle: {
normal: {
color: function () {
return "rgba(174, 174, 174, 0)";
},
borderWidth: 1,
borderColor: "#787D82",
},
},
data: [600, 600, 600, 600, 600],
barWidth: "28",
z: 1, //层级问题，加上嗯，这个必须加嗯，
},
// {
// name: "中央投资",
// type: "bar",
// data: [200, 330, 120, 290, 460],
// barWidth: 10,
// // backgroundStyle: {
// // // color: '#0f375f',
// // width: 30,
// // },
// itemStyle: {
// barGap: 20,
// backgroundColor: "rgba(0, 0, 0, 0.1)",
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 1, color: "#0CDEF2" },
// { offset: 0.5, color: "#108C9E" },
// { offset: 0, color: "#103244" },
// ]),
// },
// barGap: "-75%",
// },
{
// 内
type: "bar",
barWidth: 18,
barGap: "-82%",
legendHoverLink: false,
silent: true,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 128, 0, 1)",
},
{
offset: 1,
color: "rgba(83, 200, 239, 1)",
},
]);
},
},
// normal: {
// // barBorderRadius: [4, 4, 4, 4],
// color: function (params) {
// var colorlist = ["#81D3F8", "#FF6600", "#FF004D"];
// return colorlist[params.dataIndex];
// },
// },
},
data: dataList,
z: 1,
animationEasing: "elasticOut",
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#000",
},
},
barGap: "-76%",
symbolRepeat: "fixed",
symbolMargin: 8, //图形的两边间隔
symbol: "rect",
symbolClip: true, //是否裁剪图形
symbolSize: [20, 2],
symbolPosition: "start", //图形的定位位置。
symbolOffset: [1, 0], //图形相对于原本位置的偏移。
data: dataList,
z: 2,
animationEasing: "elasticOut",
},
],
};
this.chart1.setOption(option);
// 窗口大小改变时，图表自适应
window.addEventListener("resize", this.resizeChart);
},
扫一扫
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
