echarts入门

最新推荐文章于 2023-07-29 18:35:43 发布
最新推荐文章于 2023-07-29 18:35:43 发布
阅读量1k 收藏 1
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xs15073722800/article/details/52699558
版权

最近工作接触了echarts,算是入门吧,写下经验,方便我自己以后查看.一下先说官方文档:
y
获取echarts
1 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

2 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

3 通过 npm 获取 echarts，npm install echarts –save，详见“在 webpack 中使用 echarts”

4 cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</header>
</html>

绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这样你的第一个图表就诞生了！
这里写图片描述
这就是官方给出的demo,,,
很明显可以看出来,这主要是,依靠插件,和json(特定)语句就能实现.

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

线,,,下面说说,java生成

Maven坐标:

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>3.0.0</version>
</dependency>

jar包

ECharts组件

Axis - 坐标轴
Grid - 网格
Title - 标题
Tooltip - 提示
Legend - 图例
DataZoom - 数据区域缩放
DataRange - 值域漫游
Toolbox - 工具箱
Timeline - 时间线
visualMap - 视觉映射组件

x下面说说 以下的实现:
这里写图片描述

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

q其中: 

grid: {
        left: '3%',    可以使用 x 代替
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

这里写图片描述

GsonOption或Option都行;

        GsonOption option = new GsonOption();
        option.title("激活量线性图").tooltip(Trigger.axis);
        option.toolbox().feature(Tool.saveAsImage);
        option.grid().setX("3%");
        option.grid().setY("4%");
        option.grid().setY2("3%");
        option.yAxis(new ValueAxis());
        CategoryAxis category = new CategoryAxis();
        category.boundaryGap(false);

        for (int i = 0; i <= 23; i++) {
                categoryDataDay.add(String.valueOf(i));
        }
        List<Series> lineList = new ArrayList<>();
        List<String> legendDays = new ArrayList<>();
        Line activeLine = new Line();
        legendDays.add(showDayStr);
        lineList.add(activeLine);
        String[] legend = new String[legendDays.size()];
        for (int i = 0; i < legendDays.size(); i++) {
            legend[i] = legendDays.get(i);
        }
        option.setSeries(lineList);
        category.setData(categoryDataDay);
        option.xAxis(category);
        option.legend(legend);

(以上代码是我在项目中抽出来的,没有数据支持,读者要理解后修改,(上面代码不全.))
y以上代码 大致生成这样的格式:

 {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['今天','昨天','前天']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',

    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0','2h','4h','6h','8h','10H','12']
    },
    yAxis: {
        type: 'value'
    },
    series: [

        {
            name:'今天',
            type:'line',

            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'昨天',
            type:'line',

            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'前天',
            type:'line',

            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

f添加上数据后,大致可以生成这样的demo,具体的线段,可以设置,
这里写图片描述

1 如果 添加stack: 字段;则出现的线段不在是重贴的,而是向上排列;

series: [

        {
            name:'今天',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        }

2,注意; 

legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },

,里面的data字段要和series里面的子集合name字段对应;

series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]

d否则显示会出现错误.(数据会出现点点丢失)

SDingBa
关注
专栏目录
[Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解
杨秀璋的专栏
08-24 3万+
前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识，这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法，同时引入Echarts技术，该技术主要应用于网站可视化展示中。本文内容以实例为主，给读者最直观的图形感受。两万字基础文章，希望对您有所帮助。
Java ECharts jar包
06-06
ECharts java jar包 直接面向对象生成echart图形对象，java返回的option对象在前台解析为json对象后，直接init就可以生成echart报表。方便快捷。
Echart.jar
01-16
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
Echarts3.0jar文档
05-25
Echarts3.0jar文档
echarts封装jar包
09-20
对eCharts 中的option中的各个属性参数封装；可以查询结果直接装进去返回前台
flask_echarts:使用flask和echarts绘制图表的示例
05-18
Flask+Echarts data visualization Flask+Echarts数据可视化 See Dependencis (Ubuntu 14.04/16.04) flask $ sudo pip install Flask Test $ python visualization/view.py 进入127.0.0.1:8080下预览吧 关于这个repo 这个看起来很fancy的repo默默成了我star最多的repo...本着尽责的态度, 决定把代码整理一下 repo建立之初使用了py2, 为此花了巨量精力解决中文编码/解码的问题. 现已迁移至py3, 少了无数坑. 欢迎使用py3 前后端已经分离. 现在的代码很简单, 也和scrapy/mongodb无关了. 现在这个repo只是将以json格式保存的数据使用加载到了网页上并用的代码渲染成图表 因此使用什么样的方法获得这样
ECHarts入门
asddasddeedd的博客
01-03 2826
一、ECHarts基本介绍 百度公司开源的一个可视化库，满足绝大部分可视化图表的实现，是实现数据可视化的最佳工具之一。 官方网址：Apache ECharts ECHarts特点： 1、多种数据格式支持 key—value数据格式 二维表 TypedArray格式 2、流数据的支持 流数据的动态渲染 增量渲染技术 3、移动端的优化 4、跨平台的使用 5、绚丽的特效 6、三维可视化 二、ECHarts入门 实现步骤 引入echarts.js文件 准备一个..
Echarts入门实例
最新发布
m0_61104769的博客
07-29 762
本文介绍了Echarts的入门案例，以及在传智健康项目中对Echarts的使用
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 11万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
echarts入门基础教程
weixin_45818290的博客
08-25 1万+
新手小白echarts使用教程
echarts入门视频、笔记和源码
11-04
echarts入门视频、笔记和源码,包括基础的柱状图、折线图和饼形图制作过程等
eCharts-3.0.0.jar
03-13
Echarts java后台 对 Option封装的Jar，后台通过返回Option对象进行生成图表
ECharts-3.0.0.1.jar
06-15
把echarts封装成jar包，方便java使用
ECharts-2.2.6.jar
08-03
这是一个针对 ECharts 2.0 版本的Java类库，实现了所有ECharts中的Json结构对应的Java对象，并且可以很方便的创建Option
Echarts-Java 3.0.0.6.jar（附后台生成图片功能）
04-03
在官方代码的基础上增加了后台生成图片的功能，依赖Springboot，启动web服务后，由ImageUtil根据option的内容，生成html临时文件，并调用自带的打开浏览器功能进行预览，在浏览器端生成图片后，将图片的DataUrl发送到后端进行保存。 新增的ImageUtil提供了exportToImage方法，传入option对象（必填）、图片存储路径（选填）、图片名称（选填）、宽高（选填），生成图片后调用浏览器预览功能，等待文件保存完成，如果保存失败，自动重试3次，最后返回图片在服务器上的实际路径，便于后续处理，如导出到Word或Excel中。 后端接收图片的服务器端口和默认图片大小可通过echart.properties文件进行配置： #生成图片的服务器的url echart.server.url=http://localhost:8080 echart.server.action=/echart/saveImage #图片的宽高 echart.height=600 echart.width=800 压缩包中含ECharts-3.0.0.6.jar和ECharts-3.0.0.6-sources.jar
Echarts入门到精通
12-03
ECharts是一个优秀的JavaScript库，专为实现数据可视化而设计。它基于百度公司的ZRender图形库，提供了丰富的图表类型，如折线图、柱状图、饼图和K线图，满足不同场景的需求。 ECharts的优势在于其开源免费的特性，...
echarts入门（详细教程）
z27566的博客
10-27 1020
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。3.echarts的下载（1）从 npm 获取（2）从 CDN 获取（3）从 GitHub 获取。
echarts入门示例
11-12
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、饼状图等，适用于各种Web应用中的数据展示。ECharts 的优势在于其易于使用、灵活定制以及良好的性能，使得它在前端开发...
ECharts - Java类库
kellyZhao的博客
12-21 4589
这是一个针对ECharts3.x(2.x)版本的Java类库，实现了所有ECharts中的Json结构对应的Java对象，并且可以很方便的创建Option ECharts - Java类库 本项目短域名为 http://echarts.tk 当前版本3.0.0 本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造EC
Echarts入门教程：快速上手与实践指南
Echarts入门教程是一份由Echarts核心开发者林峰撰写的指南，旨在帮助用户理解和掌握Echarts这一强大的数据可视化库。该教程主要涵盖了以下几个关键知识点： 1. 引入和配置： - 首先，用户需要引入一个模块加载器，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值