HelloCode5110的博客

首先，看效果图：如何使用？1. 引入js库文件<script src="echarts.min.js"></script><script src="echarts-wordcloud.min.js"></script>2.准备一个DOM 容器<div class="fill-h" id="wordCloudChart"></div>3.使用echarts.init、setOption配置样式及数据..

首先，看效果图：接下来讲解如何使用1. 引入js文件<script src='echarts.js'></script><script src='echarts-liquidfill.js'></script>echarts下载地址：https://echarts.apache.org/zh/download.htmlliquidfill下载地址：https://github.com/ecomfe/echarts-liquidfil

1. Echarts 项目地址：https://echarts.apache.org/zh/index.htmlEcharts是百度纯 javascript 的数据可视化库，用于软件开发或系统图表模块，图表种类多，动态可视化效果，开源免费。部分图表示例：2.pyecharts项目地址:https://pyecharts.org/Echarts是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一...

"""复刻的 Echarts 的 demo 链接https://gallery.echartsjs.com/editor.html?c=xByOFPcjBe@Author: sunhailin-Leo@Time: 2019年7月14日"""from typing import List, Sequence, Unionfrom pyecharts import options as optsfrom pyecharts.commons.utils import JsCodefro...

from pyecharts import options as optsfrom pyecharts.charts import Piec = ( Pie() .add_dataset( source=[ ["product", "2012", "2013", "2014", "2015", "2016", "2017"], ["Matcha Latte", 41.1, 30.4, 65.1, 53.3, 83.8...

from pyecharts import options as optsfrom pyecharts.charts import Barc = ( Bar() .add_dataset( source=[ ["product", "2015", "2016", "2017"], ["Matcha Latte", 43.3, 85.8, 93.7], ["Milk Tea", 83.1, 73...

from pyecharts import options as optsfrom pyecharts.charts import Barc = ( Bar() .add_dataset( source=[ ["score", "amount", "product"], [89.3, 58212, "Matcha Latte"], [57.1, 78254, "Milk Tea"], ...

from pyecharts import options as optsfrom pyecharts.charts import Funnelfrom pyecharts.faker import Fakerc = ( Funnel() .add( "商品", [list(z) for z in zip(Faker.choose(), Faker.values())], sort_="ascending", ...

from pyecharts import options as optsfrom pyecharts.charts import Funnelfrom pyecharts.faker import Fakerc = ( Funnel() .add("商品", [list(z) for z in zip(Faker.choose(), Faker.values())]) .set_global_opts(title_opts=opts.TitleOpts(titl...

import pyecharts.options as optsfrom pyecharts.charts import Funnel"""Gallery 使用 pyecharts 1.1.0参考地址: https://echarts.baidu.com/examples/editor.html?c=funnel目前无法实现的功能:1、暂时无法对漏斗图的长宽等范围操作进行修改"""x_data = ["展现", "点击", "访问", "咨询", "订单"]y_data ...

import pyecharts.options as optsfrom pyecharts.charts import Gauge"""Gallery 使用 pyecharts 1.1.0参考地址: https://echarts.baidu.com/examples/editor.html?c=gauge目前无法实现的功能:1、暂无"""( Gauge(init_opts=opts.InitOpts(width="1600px", height="800px"))...

from pyecharts import options as optsfrom pyecharts.charts import Gaugec = ( Gauge() .add( "业务指标", [("完成率", 55.5)], axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts( color=...

from pyecharts import options as optsfrom pyecharts.charts import Gaugec = ( Gauge() .add( "", [("完成率", 66.6)], title_label_opts=opts.LabelOpts( font_size=40, color="blue", font_family="Microsoft YaHei"...

from pyecharts import options as optsfrom pyecharts.charts import Gaugec = ( Gauge() .add("", [("完成率", 66.6)], radius="50%") .set_global_opts(title_opts=opts.TitleOpts(title="Gauge-修改 Radius 为 50%")) .render("gauge_change_radius.ht...

from pyecharts import options as optsfrom pyecharts.charts import Gaugec = ( Gauge() .add( "业务指标", [("完成率", 55.5)], split_number=5, axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleO...

数据的视觉映射数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如graph、事件河流图、treemap也都会做出他们内置的映射。此外，ECharts 还提供了visualMap 组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：图形类别（symbol）、图形大小（symbolSize）颜...

ECharts 中的事件和行为在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。在 ECharts 3 中绑定事件跟 2 一样都是通过on方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。myChart.on('click', function (params) { // 控..

小例子：自己实现拖拽介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富交互的功能。这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那

小例子：实现日历图在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？通过以下三个步骤即可实现上述效果：第一步：引入js文件下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦<script src="echarts.min.js"></script><script> // ...</script>第二步：指定DOM元素作为图表容器和ECharts中的其他图表一样，创建一个

旭日图旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。引入相关文件旭日图是 ECharts 4.0 新增的图表类型，从CDN引入完整版的echarts.min.js最简单的旭日图创建旭日图需要在series配置项中声明类型为'sunburst'的系列，并且以树形结构声明其data：var option = { series: { t...

富文本标签在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：其他一些例子：Map Labels,Pie Labels,Gauge.原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。echarts v3.7 以后，支持了富文本标签，能够：定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、...

使用 Canvas 或者 SVG 渲染浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而ECharts v4.0发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置renderer 参数为'...

在图表中支持无障碍访问W3C 制定了无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。默认关闭，需要通过将aria.show设置为true开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述...

移动端自适应ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题，ECharts

在图表中加入交互组件除了图表外 ECharts 中，提供了很多交互组件。例如：图例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件timeline下面以数据区域缩放组件dataZoom为例，介绍如何加入这种组件。数据区域缩放组件（dataZoom）介绍『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dataZoom组件能够在直角坐标系（grid）、极坐标系（polar）中实现这一功能。...

使用 dataset 管理数据ECharts 4 开始支持了dataset组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：option: { xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Cheese Coc..

异步数据加载和更新异步加载入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过setOption填入数据和配置项就行。var myChart = echarts.init(document.getElementById('main'));$.get('data.json').done(function (data) {...

ECharts 中的样式简介本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。颜色主题（Theme） 调色盘 直接样式设置（itemStyle、lineStyle、areaStyle、label、...） 视觉映射（visualMap）其他关于样式

个性化图表的样式ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：绘制南丁格尔图5分钟上手ECharts中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。myChart.setOption({ .

ECharts 基础概念概览本文介绍 echarts 最基本的名词和概念。echarts 实例一个网页中可以创建多个echarts 实例。每个echarts 实例中可以创建多个图表和坐标系等等（用option来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。系列（series）系列（series）是很常见的名词。在 echarts 里，系列（series）...

在 webpack 中使用 EChartsWebpack是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。npm 安装 ECharts你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save引入 ECharts通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可.

自定义构建 ECharts一般来说，可以直接从CDN中获取构建后的 echarts，也可以从GitHub中的echarts/dist文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。 常用版：echarts/dist/echarts.common.js，体积适中，包...

5 分钟上手 ECharts获取 ECharts你可以通过以下几种方式获取 ECharts。 从Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。 在 ECharts 的GitHub获取。 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts” 通过jsDelivr等 CDN 引入 引入 ECharts通过标签方式直接引...

from pyecharts import options as optsfrom pyecharts.charts import Radarvalue_bj = [ [55, 9, 56, 0.46, 18, 6, 1], [25, 11, 21, 0.65, 34, 9, 2], [56, 7, 63, 0.3, 14, 5, 3], [33, 7, 29, 0.33, 16, 6, 4], [42, 24, 44, 0.76, 40, 16, 5],...

from pyecharts import options as optsfrom pyecharts.charts import Grid, Line, Scatterfrom pyecharts.faker import Fakerscatter = ( Scatter() .add_xaxis(Faker.choose()) .add_yaxis("商家A", Faker.values()) .add_yaxis("商家B", Faker.value...

from pyecharts import options as optsfrom pyecharts.charts import Bar, Grid, Line, Pagebar = ( Bar() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "蒸发量", [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162....

import sslimport pyecharts.options as optsfrom pyecharts.charts import Mapfrom pyecharts.datasets import register_url"""Gallery 使用 pyecharts 1.1.0 和 echarts-china-cities-js参考地址: https://echarts.baidu.com/examples/editor.html?c=map-HK"""ssl....

import pyecharts.options as optsfrom pyecharts.charts import Radar"""Gallery 使用 pyecharts 1.1.0参考地址: https://echarts.baidu.com/examples/editor.html?c=radar目前无法实现的功能:1、雷达图周围的图例的 textStyle 暂时无法设置背景颜色"""v1 = [[4300, 10000, 28000, 35000, 50000, 1...

from pyecharts import options as optsfrom pyecharts.charts import Scatterfrom pyecharts.faker import Fakerc = ( Scatter() .add_xaxis(Faker.choose()) .add_yaxis("商家A", Faker.values()) .add_yaxis("商家B", Faker.values()) .set_global_...

import asynciofrom aiohttp import TCPConnector, ClientSessionimport pyecharts.options as optsfrom pyecharts.charts import Scatter3D"""Gallery 使用 pyecharts 1.1.0参考地址: https://echarts.baidu.com/examples/editor.html?c=scatter3d&gl=1&theme=d...