echarts入门

转载：http://www.cnblogs.com/LonelyShadow/p/4175071.html

1. 新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom。

复制代码
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts - 孤影Blog</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom
复制代码

2. 新建<script>标签引入echart-all.js。

复制代码
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts - 孤影'Blog</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body>

引入echarts-all.js
复制代码

3. 新建<script>，使用全局变量echarts初始化图表并驱动图表的生成。

复制代码
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts - 孤影'Blog</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

使用全局变量echarts初始化图表并驱动图表的生成
复制代码

 

posted @   Xiao|Deng  阅读(455)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae