echart中的自适应图标_中国地图

最新推荐文章于 2024-07-26 15:20:05 发布

kwok_çç

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量347

点赞数

分类专栏： Echarts 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43413047/article/details/105006042

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍如何在项目中安装并使用ECharts进行数据可视化，包括npm安装、main.js引入、图表配置及自适应调整等关键步骤。通过具体示例展示如何创建基本的柱状图，并实现窗口大小变化时图表的重绘。

摘要由CSDN通过智能技术生成

安装 echart

npm install echarts -S

引用 echart

在main.js中
import echarts from 'echarts'

使用 echart

1.  var chart = echarts.init(document.getElementById('ec_map'));
2.  var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);

    //让表格自适应(好像echart不支持把百分百或者rem写在html标签上）
    document.getElementById('ec_map').style.width = "100%";
    document.getElementById('ec_map').style.height = "7.61rem";
    setTimeout(function () {
        chart.resize();
    },100)

重绘表格

window.onresie = function(){
    document.getElementById('ec_map').style.width = "100%";
    document.getElementById('ec_map').style.height = "7.61rem";
    setTimeout(function () {
        chart.resize();
    },100)
}