个人网站管理系统,公众号平台制作,邮件营销 wordpress,在哪个网站上可以找兼职做到这里还是用的死数据#xff0c;先将柱状图引入html页面测试一下
根据上一步echarts的使用步骤#xff0c;引入echarts.js后需要初始化一个实例对象#xff0c;所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。
//在index.html引入script srcj…到这里还是用的死数据先将柱状图引入html页面测试一下
根据上一步echarts的使用步骤引入echarts.js后需要初始化一个实例对象所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。
//在index.html引入script srcjs/echarts.min.js/scriptscript srcjs/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();});
