PS相关学习资料链接:Pink老师的教程分解,O(∩_∩)O哈哈~
自行设置css和html结构,这里主要是js:
(function() {
//找到画图的区域
var myChart = echarts.init(document.querySelector(".horization .chart"));
//第一类柱子的颜色
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
var option = {
grid: {
left: '20%',
bottom: '18%',
containLabel: false, //grid区域是否包含刻度标签
},
xAxis: {
type: 'value',
boundaryGap: 'true',
//坐标轴轴线
axisLine: {
show: false
}
},
//y轴中的两个对象分别表示左边和右边的y轴
yAxis: [{
type: 'category',
//是否反向坐标轴
inverse: true,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: { // 不显示刻度
show: false,
alignWithLabel: true
},
axisLine: { //不显示y轴线条
show: false
},
data: ['NODE', 'VUE', 'javascript', 'CSS3', 'HTML5']
},
{
type: 'category',
inverse: true,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisTick: { // 不显示刻度
show: false,
alignWithLabel: true
},
axisLine: { //不显示y轴线条
show: false
},
data: [100, 200, 300, 400, 500]
}
],
//series中的两个对象分别表示两类柱子:条条和框框
series: [{
type: 'bar',
name: "条",
//相当于CSS中的z-index,一个柱子设为0,一个柱子设为1,表示两个柱子叠加效果
yAxisIndex: 0,
// 柱子之间的距离
barCategoryGap: 50,
data: [70, 80, 10, 78, 69],
barWidth: 10, //柱子的宽度
//柱子的样式
itemStyle: {
barBorderRadius: 5, //圆角
color: function(params) { //给柱子设置颜色
//console.log(params);params指的是柱子对象, dataIndex 是当前柱子的索引号
var num = myColor.length;
return myColor[params.dataIndex % num]
}
},
// 柱子上的文本标签
label: {
show: true,
// 图形内显示
position: 'inside',
// 文字的显示格式:c指的是data中的数据值
formatter: "{c}%"
}
},
{
name: "框",
type: 'bar',
yAxisIndex: 1,
barCategoryGap: 50,
data: [100, 100, 100, 100, 100],
barWidth: 15, //柱子的宽度
itemStyle: {
color: 'none',
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15 //圆角
}
}
]
};
myChart.setOption(option);
//让图表跟随屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
});
})();