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

Zheng1132024-10-06 9:40

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