echart 学习记录
注意：echart的颜色 格式应为 '#xxx',不要设置‘rgb（x,x,x）’,应为rgb的颜色在电视屏上不识别
setImg2(x, y) { // x, y 分别是后端返回的x轴、y轴的数据
const option = {
title: {
text: "试驾车系排名",
textStyle: {
color: "#00e4ff",
fontSize: 24,
fontFamily: "Microsoft YaHei",
fontWeight:400,
},
subtext: "单位/次",
subtextStyle: {
color: "#ffffff",
},
padding: [
10, // 上
5, // 右
0, // 下
10 // 左
],
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { // 图像的位置
top: "23%",
left: "10",
// right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [ // x轴设置
{
type: "category",
data: x,
axisTick: {
// 刻度线
alignWithLabel: true,
show: false
},
axisLabel: {
// 坐标标签
color: "#ffffff",
interval: 0, // 文字倾斜
rotate: 30, // 文字倾斜
// fontSize: '8',
},
// 坐标轴线
axisLine: {
lineStyle: {
color: "#3d4666"
}
}
}
],
yAxis: [
{
type: "value",
minInterval: 1, // y轴不显示小数
axisTick: {
alignWithLabel: true,
show: false
},
axisLabel: {
// 坐标标签
color: "#ffffff",
margin: 60
},
// 坐标轴线
axisLine: {
lineStyle: {
color: "#3d4666"
}
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: "#3d4666"
}
}
}
],
color:['#FF5F01','#B67321','#845C39','#3B5D61'], //自定义颜色
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}" // 格式化输出，a,b,c,d 代表的值可以参考官方文档
},
// 标记样式，指哪个颜色显示什么的区域
legend: {
data: x,
textStyle: {
color: "#fff"
},
top: '15%',
// padding: [
// 60, // 上
// 10, // 右
// 5, // 下
// 10, // 左
// ],
},
series: [
{
// name: "直接访问",
type: "bar",
// barWidth: "60%",
data: y,
itemStyle: {
normal: { // 柱状图颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,0,0,1,
[
{
offset: 0,
color: ["#EA8003"] // 0% 处的颜色
},
{
offset: 0.5,
color: ["#FFA201"] // 60% 处的颜色
},
{
offset: 1,
color: ["#FFBA01"] // 100% 处的颜色
}
],
false
)
}
}
}
]
};
var myChart = this.$echarts.init(document.getElementById("main2"));
myChart.setOption(option, true);
// 监听屏幕的缩放，让图形自动改变大小
window.addEventListener("resize", function() {
myChart.resize();
});
},
网友评论