【可视化大屏】将柱状图引入到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();
    });
相关推荐
宁&沉沦1 分钟前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir15 分钟前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
Xzh04231 小时前
前后端学习的交界
java·ajax·maven·axios·测试
aichitang20241 小时前
欧拉拓扑学公式:几何与拓扑的交汇
html·拓扑学
古一|1 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
熊猫钓鱼>_>2 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
写不来代码的草莓熊4 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js