// 第一种方式
// var myChart = echarts.init(document.getElementById('main'));
// 第二种方式
var myChart = echarts.init(this.$refs.main);
// 绘制图表
myChart.setOption({
title: {
text: "柱状图",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
axisLabel: {
/* 显示所有的x轴的数据 */
interval: 0,
/* 放不下的倾斜角度 */
rotate: 20,
/* 数据距离刻度线的距离 */
margin: 15,
}
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
// data: [5, 20, 36, 10, 10, 20],
data: [
{
value: 5,
itemStyle: {
color: "#a90000",
},
},
{
value:20, /* 给某一个柱子单独设置颜色 */
itemStyle: {
/* 设置渐变色的柱子颜色 */
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red", // 柱子最上面的颜色是红色
},
{
offset: 1,
color: "blue", // 柱子最下面的颜色是蓝色
},
],
global: false,
}}},
36,
10,
10,
20,
],
},
],
});
},
