到这里还是用的死数据,先将柱状图引入html页面测试一下
根据上一步echarts的使用步骤,引入echarts.js后需要初始化一个实例对象,所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。
//在index.html引入
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
//在index.js文件中
(function () {
// 实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和数据
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签的样式
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
// x轴线条样式不显示
axisLine: {
show: false
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
// y轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
// width: 1,
// type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "35%",//柱子宽度
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
barBorderRadius: 5//柱子圆角
}
}
]
};
// 把配置给实例对象
myChart.setOption(option);
})()
效果图:
存在的问题:图表没有自适应
解决办法:
在index.js中添加
// 监听屏幕尺寸变化,让图表自适应
window.addEventListener("resize", function () {
myChart.resize();
});