【可视化大屏】将柱状图引入到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();
    });
相关推荐
键盘不能没有CV键1 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
你的人类朋友3 小时前
【Node】认识multer库
前端·javascript·后端
云知谷5 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
可触的未来,发芽的智生5 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者6 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀6 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
天***88967 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体7 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong7 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron