PS相关学习资料链接:Pink老师的教程分解,O(∩_∩)O哈哈~
<div class="bar">
<h2>就业行业
<a href="javascript:;">2019</a>
<a href="javascript:;">2020</a>
</h2>
<div class="chart">
</div>
</div>
css自行设置,类名为chart的div要有宽高。
javascript:
//立即执行函数
(function() {
//1 实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
//2 指定配置和数据
var option = {
color: ["#2f89cf"],//柱子的颜色
//提示框
tooltip: {
trigger: "axis", //触发类型:axis类目轴或item非类目轴
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
//图表大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true //grid 区域是否包含坐标轴的刻度标签
},
//x轴
xAxis: [{
type: "category",
boundaryGap: true, // 坐标轴两边留白(默认就是true)
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
],
//坐标轴刻度相关设置
axisTick: {
alignWithLabel: true //刻度线和标签对齐
},
//坐标轴刻度标签
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
//坐标轴轴线
axisLine: {
show: false //不显示
}
}],
//y轴
yAxis: [{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
type: "solid"
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线(默认数值轴显示,类目轴不显示)
lineStyle: {
// color: 'yellow'
color: "rgba(255,255,255,.1)"
}
}
}],
series: [{
name: "直接访问",
type: "bar",
barWidth: "35%", //柱子的宽度
data: [200, 300, 300, 900],
itemStyle: {
barBorderRadius: 5 //圆角
}
}]
};
//3 把配置给实例对象
myChart.setOption(option);
//让图表跟随屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
});
// 数据变化
var dataAll = [
{ year: "2019", data: [200, 300, 300, 900] },
{ year: "2020", data: [300, 400, 350, 800] }
];
//jquery写法:点击不同的a标签,改变series中的data
$(".bar h2 ").on("click", "a", function() {
//console.log($(this).index());//0或1
option.series[0].data = dataAll[$(this).index()].data;
myChart.setOption(option);
});
})();