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

到这里还是用的死数据,先将柱状图引入html页面测试一下

根据上一步echarts的使用步骤,引入echarts.js后需要初始化一个实例对象,所以新建一个index.js文件来进行创建实例化对象和配置数据信息等。

javascript 复制代码
//在index.html引入
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
javascript 复制代码
//在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);
})()

效果图:

存在的问题:图表没有自适应
解决办法:

javascript 复制代码
在index.js中添加
 // 监听屏幕尺寸变化,让图表自适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
相关推荐
此星光明43 分钟前
GEE 案例——利用哨兵-2 图像时间序列和谷歌地球引擎云计算自动绘制和监测香港海洋水质参数
javascript·云计算·应用·gee·案例·时序·水质
小林学习编程1 小时前
Vue3入门介绍及快速上手
前端·javascript·vue.js
一雨方知深秋1 小时前
vue3框架还需要学习什么
javascript·vue.js·学习
几何心凉2 小时前
Service Worker 缓存未更新的原因与解决方案
javascript·缓存
且从容.2 小时前
如何设置el-date-picker的默认截止时间为“23:59:59”
javascript·vue.js·ecmascript
EasyNTS2 小时前
H.265流媒体播放器EasyPlayer.js网页web无插件播放器:如何优化加载速度
前端·javascript·h.265
shenweihong2 小时前
javascript实现sha512和sha384算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
ZhaiMou3 小时前
三个实战JS例子来锻炼JS能力
开发语言·前端·javascript·html
yqcoder3 小时前
electron 中 webFrame 作用
前端·javascript·electron
Amodoro3 小时前
解决vite项目tailwindcss不生效!!(Vue3、tailwindcss失效)
前端·javascript·vue.js·vite·tailwindcss