ECharts 入门

最新推荐文章于 2024-07-17 08:19:08 发布

不期望不希望不奢望

最新推荐文章于 2024-07-17 08:19:08 发布

阅读量523

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_72101182/article/details/126443657

版权

1.特性

丰富的图表类型:提供开箱即用的20多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
强劲的渲染引擎:Canvas、SVG双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
专业的数据分析:通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
优雅的可视化设计:默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
健康的开源社区:活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
友好的无障碍访问:智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。

网址：Apache ECharts

2.概念

通常来说，需要在HTML中先定义一个<div>节点，并且通过CSS使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小。
例如：

    <div id="main" style="width: 600px;height:400px;"</div>
<script>
    var mychart = echarts.init(document.getElementById('main'));
</script>

3.样式

最简单的更改全局样式的方式,是直接采用颜色主题（theme).
ECharts除了一贯的默认主题外,还内置了dark主题。可以像这样切换成深色模式:

var chart= echarts.init(dom,'dark');

效果：

4.坐标轴

x轴和y轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据。

×轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如""销售时间""销售地点"“产品名称”等。
y轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量"和“销售金额"等。

5.示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="echarts/dist//echarts.min.js"></script>
    <!-- 汉化包 -->
    <script src="echarts/i18n/langZH.js"></script>
    <title>echarts</title>
</head>

<body>
    <div id="main">

    </div>
    <script>
        var main = document.getElementById("main")
            // 指定图表的配置项和数据
        var myChart = echarts.init(main, "customed", {
            width: "auto",
            height: 600
        })
        var option = {
            title: {
                show: true,
                text: "产品销量图"
            },
            legend: {},
            dataset: {
                source: [
                    ['月份', '降水量', '温度'],
                    ['1月', 2.7, -3.7],
                    ['2月', 4.9, -0.7],
                    ['3月', 8.3, 5.8],
                    ['4月', 21.2, 14.2],
                    ['5月', 34.2, 19.9],
                    ['6月', 78.1, 24.4],
                    ['7月', 185.2, 26.2],
                    ['8月', 159.7, 24.8],
                    ['9月', 45.5, 20.0],
                    ['10月', 21.8, 13.1],
                    ['11月', 7.4, 4.6],
                    ['12月', 2.8, -1.5]
                ]
            },
            xAxis: {
                type: 'category',
                name: '月份',
            },
            yAxis: [{
                type: 'value',
                name: '降水量',
            }, {
                type: 'value',
                name: '温度',
            }, ],
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                itemStyle: {
                    color: 'aqua',
                },
            }, {
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    color: 'pink',
                },
            }, ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>

</html>

效果图