【免费】ECharts学习代码_echartscategory资源-CSDN文库

共10个文件

html：8个

js：2个

需积分: 0 18 浏览量更新于2022-03-19 收藏 711KB ZIP 举报

ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它专为Web前端开发设计，能够帮助开发者轻松地在网页上创建交互式、美观的图表。ECharts提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，支持多种自定义选项，能满足各种数据展示需求。下面我们将深入探讨ECharts的学习要点。 **安装与引入**。ECharts可以通过npm或CDN方式引入到项目中。如果使用npm，可以运行`npm install echarts --save`，然后在代码中用`import echarts from 'echarts'`引入；若使用CDN，可以直接在HTML文件中添加链接，如`<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>`。 **初始化图表**。ECharts需要一个DOM元素作为容器，通过`echarts.init`方法将图表实例绑定到该元素上。例如： ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 这里的'main'是容器的ID。接着，**配置项设置**。ECharts的图表样式、数据、交互等特性都通过配置项来控制。配置项是一个JSON对象，其中包含了各种属性和方法。例如，创建一个简单的折线图： ```javascript 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); ``` 这段代码中，`option`对象定义了图表的标题、图例、X轴、Y轴以及数据系列。 **数据处理**。ECharts支持多种数据格式，如数组、对象数组等。在`series.data`中，你可以设置数据值以及对应的标签。对于更复杂的数据处理，如动态加载、数据过滤等，ECharts也提供了相应的API。 **图表交互**。ECharts提供丰富的交互功能，如点击事件、鼠标悬浮提示、缩放、平移等。例如，可以通过监听`click`事件来响应用户点击： ```javascript myChart.on('click', function (params) { console.log('点击了：', params); }); ``` **图表动画**。ECharts默认对图表的显示和更新添加了平滑的动画效果，也可以自定义动画配置。通过`animation`属性可以开启或关闭动画，通过`animationDuration`和`animationEasing`可以调整动画时长和缓动函数。 **多图联动**。在同一个页面上有多个ECharts图表时，可以实现图表间的联动，如共享数据、同步缩放等，增强用户体验。 **自定义组件**。ECharts允许开发者自定义组件，以满足个性化需求。这包括自定义图例、工具箱、标题等，或者创建全新的组件。 **版本升级与社区支持**。ECharts不断迭代更新，新版本会引入更多特性、优化性能和修复已知问题。同时，ECharts有一个活跃的社区，提供了大量示例、教程和插件，方便开发者学习和应用。通过以上讲解，你应该对ECharts有了基本的了解。实际应用中，还需要结合具体需求，灵活运用这些知识点，创造出满足业务需求的可视化解决方案。

收起资源包目录

ECharts.zip （10个子文件）

ECharts

05-柱状图.html 1KB

07-饼图.html 2KB

02-基础配置修改.html 2KB

08-饼图数据解析获取.html 2KB

01-5分钟上手.html 1KB

03-修改系列和弹框配置.html 4KB

04-x-y-轴配置.html 5KB

06-折线图（toolbox）.html 3KB

echarts.js 3.09MB

jquery.min.js 94KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/echarts.js"></script> <style> #main { width: 600px; height: 300px; background-color: #212948; } </style> </head> <body>  <div id="main"></div> <script> // 1、基于准备好的dom，初始化echarts实例 echarts.init() var myChart = echarts.init(document.getElementById("main")); // 2、配置项 var option = { title: { // 标题组件，包含主标题和副标题 show: true, // 是否显示标题组件 text: '风险交易数据监测', // 主标题文本，支持使用 \n 换行 textStyle: { color: "#fff", // 主标题文字的颜色 fontSize: 16, // 主标题文字的字体大小 }, link: 'https://www.baidu.com', // 主标题文本超链接。 target: 'blank', // 指定窗口打开主标题超链接。 'self' 当前窗口打开 'blank' 新窗口打开(默认) subtext: '副标题', subtarget: "", subtextStyle: { // 副标题的样式 }, // textAlign: "center", // 不常用主标题和副标题组件对齐方式（容器左边参考） padding: 10, // 标题与边框的距离 itemGap: 10, // 主副标题之间的间距 left: "left", // title 组件离容器左侧的距离 }, tooltip: { // 提示框组件 trigger: 'axis', // 触发类型 axis 柱状图和折线图 // formatter: '', // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 // 1. 字符串模板（推荐） {a}（系列名称）,{b}（类目值）,{c}（数值） // formatter: '{a0}-{b0}-{c0}--{a1}-{b1}-{c1}', // formatter: '{a0}-{b0}-{c0}<br/>{a1}-{b1}-{c1}', }, legend: { // 图例组件展现了不同系列的标记(symbol)，颜色和名字 textStyle: { color: "#999" }, // icon: "diamond", // 图例项的 icon // 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI icon: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7', data: ['销量', { // 系列内容名称 name: '利润', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }], orient: "vertical", // 图例列表的布局朝向 'horizontal'(默认) 'vertical' }, xAxis: { // x轴配置直角坐标系 grid 中的 x 轴 axisLine: { // 坐标轴轴线相关设置 show: false, lineStyle: { color: "blue", // 坐标轴线线的颜色线的颜色修改后刻度线和label都修改样式 width: 1, // 线宽度 // type: '', }, }, axisTick: { // 坐标轴刻度相关设置 show: false, // 是否显示坐标轴刻度 alignWithLabel: true, // 中间位置显示线 }, axisLabel: { // 坐标轴刻度标签的相关设置 color: "green", // 刻度标签文字的颜色 }, splitLine: { // 坐标轴在 grid 区域中的分隔线 show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示 }, data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], }, yAxis: { // y轴配置 y轴默认不写数据自动分配y轴的值 axisLine: { show: false, lineStyle: { color: "green", } }, axisTick: { show: false, }, splitLine: { lineStyle: { type: 'dashed', // 虚线 } } }, series: [ // [{},{}] { name: '销量', type: 'bar', // bar 柱状图 line 折线图 data: [50, 20, 36, 10, 10, 20] }, { name: '利润', type: 'bar', // bar 柱状图 line 折线图 data: [100, 10, 56, 40, 20, 10] }, ] }; // 3、渲染显示 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>