【可视化大屏】将柱状图引入到html页面中

到这里还是用的死数据，先将柱状图引入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();});