echarts 使用教程-谈谈我最喜欢的两个可视化工具，Echarts 和 Tableau

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

二条： 妈妈！又是一把巨蟒武器！！

三：使用Python库PySimpleGUI制作手动办公软件！

↑ 关注 + 星标 ，每天学Python新技能


后台回复【大礼包】送你Python自学大礼包





你好，我是龙哥！
由于 Excel 无法处理复杂的场景，因为我经常在工作中需要制作图表，因此 Echarts 和 Tableau 成为我最好的两个助手。
作为众所周知的可视化工具，Echarts和Tableau在本质上并不完全相同。
Echarts 是一个仅限 JavaScript 的开源可视化图表库，允许用户通过简单地引用打包的 JS 来显示漂亮的图表。
不久前，Echarts成为Apache的顶级项目。Apache顶级项目的家庭成员是什么？Mavan、Hadoop、Spark、Flink...都是软件领域的佼佼者
Tableau是一个BI工具，一个商业PC应用程序，你只需要拖放就可以生成各种图表，坐标图，仪表板和报告。Tableau 创建的可视化项目可以发布在 Web 上并与他人共享。
2019 年，Tableau 被 Salesforce 以 157 亿欧元的价格竞标，这表明这种 BI 工具并不常见。
您可以将 Echarts 视为一个可视化储藏室，其中每个可视化部分都可以随时使用，但适用于任何场合。Tableau就像一个自给自足的可视化生态，你可以在上面发挥各种可视化技能，但你无法摆脱这个生态。
让我们从图表开始
Echarts提供了几乎所有你能使用的图表，并且对国外的开发环境非常友好，因为它是对百度的摆弄。
你看，除了有定期的统计图表：
以及令人眼花缭乱的 3D 可视化
Echarts的大多数图表方法都封装在JS中，你只需要修改数据和规范就可以将它们应用到你自己的项目中。
Echarts还有一个用户社区，展示了很多工作，所以你可以看看。
人气作品-区域地图
最好通过阅读官方网站教程，然后将其与练习相结合来学习电子图表。英文文档非常接地气。
给出一些常用的研究地址
官方文档：
官方示例：
用户工作领域：
让我们再谈谈 Tableau
Tableau现在在国外越来越流行，做数据的人会知道。
它适用于视觉标牌和数据叙事，符合当今数字化运营的管理。
下面简要介绍了如何使用 Tableau。
先在Tableau的官方网站上下载桌面，然后无脑安装。
分三步取出菜鸟操作：
1. 连接数据
它可以连接到各种数据库，如Excel，CSV和MySQL
2. 了解哪些度量和维度是度量是数据
表中的数值数据，维度是分类数据
3. 查看 Tableau 中的各种图表柱形图、点图、
折线图、
饼图、直方图、地图等
走完基础知识，就是整个视觉分析和展示过程：
需要详细解释这些步骤：
Tableau 联接所有常用数据源。它有一个外部连接器，负责在提供连接参数后构建连接。无论是简单的文本文件、关系源、无 SQL 源还是云数据库，Tableau 几乎可以连接所有数据源。
联接到数据源后，Tableau 环境中将拥有可用的所有列和数据。您可以将它们划分为维度、度量并创建任何所需的层次结构。这样，您创建的视图传统上称为报表。Tableau 提供了简单的拖放功能来构建视图。
内部创建的视图需要使用筛选器、聚合、轴标签、颜色和边框进一步改进。
我们创建不同的工作表来创建相同数据或不同数据的不同视图。
仪表板包含链接到它的多个工作表。为此，工作表中的任何操作都可以相应地修改仪表板中的结果。故事是包含一系列工作表或仪表板的工作表
，这些工作表或仪表板协同工作以传达信息。您可以创建故事来展示事实之间的联系、提供背景、展示决策与结果的关系，或者只是提出有说服力的案例。
完成此操作后，一个生动的仪表板诞生了。
其中，有必要不断练习和熟悉Tableau的每个组件，功能，连接等。
我们可以为 Tableau 选择正确的可视化表达方式来实现。
不要以为Tableau只提供了几种简单的样式，如果你想制作出令人眼花缭乱的图表，Tableau也可以完美地支持它。
看看大师们如何演奏塔贝劳。
还有我最喜欢的仪表板之一
由于Tableau是一款商业软件，其官方网站英文教程非常详细。
最后，我还给 Tableau 讲了几句学习课
官方文档：
用户展示社区：
最后
如果要进行可视化开发，我们建议使用电子图表echarts 使用教程，如果要设计业务可视化报表echarts 使用教程，请使用 Tableau。
欢迎来到留言区，交流您在可视化方面的经验。
---EOF---
推荐阅读

因为爬虫失控，CTO和程序员双双被判刑！
火了！开源的Python抢票神器，过年回家就看这一波了！
AI智能语音项目 原理、代码最详细解读！
危险！VPN翻墙被抓了！



背景
Echarts是百度推出的一个用JavaScript实现的开源可视化库。 该库提供了用于统计的常规折线图、直方图、散点图、饼图、K线图、箱形图，以及用于地理数据可视化和关系数据可视化的地图、热力图和折线图。 关系图、树形图、旭日图、多维数据可视化的平行坐标，以及 BI 的漏斗图、仪表板，并支持图表之间的混搭。
直方图
散点图
关系图
三维地图
由于Echarts提供了丰富的图形，我们有必要对其进行封装，使其能够支持Windows Forms应用。
技术分析
整体技术方案是制作一个自定义控件，其中包括WebBrowser浏览器控件，通过该控件显示指定位置的网页。 就像我们直接通过网络浏览器浏览网页一样。 具体步骤如下：
首先，创建一个控制项目 LSGO.Core.ECharts 以在 Windows 窗体应用程序中使用。
其次，将一个WebBrowser控件拖入控件项目的设计器中，并将其Dock属性设置为Fill，即让WebBrowser填充整个容器。
接下来，编写一个InitialECharts方法来加载指定目录下的网页.assetsecharts.html，并让该网页在WebBrowser中打开。
当网页加载完毕后，触发WebBrowser的WebBrowserDocumentCompletedEventHandler事件，以storm注册的方式调用网页中JS编写的showChart方法echarts 参数，然后在网页中显示图形。
当表单控件的规格发生变化时，会触发WebBrowser的SizeChanged事件，并在storm注册方法中调用网页中JS编写的setPosition方法，重新调整显示图形的布局，以满足新的要求规格。
WebBrowser 类的常用属性、事件和技术。
属性
/// 

/// 获取或设置一个对象，该对象可由显示在 WebBrowser 控件中的网页所包含的脚本代码访问。
/// 
/// 
/// 可用于脚本代码的对象。
/// 
public object ObjectForScripting { get; set; }
/// 
/// 表示当前页的 HtmlDocument，如果未加载任何页，则为 null。
/// 
public HtmlDocument Document { get; }


事件

/// 

/// 在 WebBrowser 控件完成加载文档时发生。
/// 
public event WebBrowserDocumentCompletedEventHandler DocumentCompleted;
/// 

/// 在 Control.Size 属性值更改时发生。
/// 
public event EventHandler SizeChanged;


方法
/// 

/// 将指定的统一资源定位器 (URL) 处的文档加载到 WebBrowser 控件中，替换上一个文档。
/// 
/// 要加载的文档的 URL。
public void Navigate(string urlString);


HtmlDocument 类的常见技巧。
/// 
/// 活动脚本调用所返回的对象。
/// 
/// 要调用的脚本方法的名称。
/// 要传递给脚本方法的参数。
public object InvokeScript(string scriptName, object[] args);


代码
Step1：创建一个用于显示图形的网页。
最初显示的网页echarts.html









 


 

 

 
 
 
 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);
  




显示图形时调用的JS代码showChart
function showChart(option) {
 myChart.clear();
 var op = JSON.parse(option);
 myChart.setOption(op);
}



控件规格改变时调用的JS代码setPosition
function setPosition(height) {
 var divMain = document.getElementById("main");
 divMain.style.height = height + "px";
 window.onresize = myChart.resize();
}


Step2：创建自定义控件Echarts。
Echarts控件初始化方式
public object Option { get; set; }
public void InitialECharts(Option option)
{
 if (option == null)
 throw new ArgumentNullException();
 Option = JsonConvert.SerializeObject(option);
 string strHtml = Application.StartupPath + @"assetsecharts.html";
 if (File.Exists(strHtml))
 {
 webBrowserMain.Navigate(strHtml);
 webBrowserMain.ObjectForScripting = this;
 }
}


WebBrowser中加载echarts.html时执行的方式。
private void webBrowserMain_DocumentCompleted(object sender,
 WebBrowserDocumentCompletedEventArgs e)
{
 object[] objArray = new object[] {Option};
 HtmlDocument htmlDocument = webBrowserMain.Document;
 if (htmlDocument != null)
 {
 htmlDocument.InvokeScript("showChart", objArray);
 objArray[0] = Height;
 htmlDocument.InvokeScript("setPosition", objArray);
 _isDocumentLoaded = true;
 }
}


当控件Echarts的大小发生变化时执行的方式。
private void webBrowserMain_SizeChanged(object sender, EventArgs e)
{
 if (_isDocumentLoaded)
 {
 object[] objArray = new object[] {Height};
 HtmlDocument htmlDocument = webBrowserMain.Document;
 if (htmlDocument != null)
 {
 htmlDocument.InvokeScript("setPosition", objArray);
 }
 }
}


Step3：百度Echarts组件封装。
ECharts中xAxis结构的封装。
public class XAxis
{
 /// 

 /// 坐标轴类型
 /// 
 public string type { get; set; } = "category";
 /// 

 /// 类目数据
 /// 
 public List data { get; set; }
}


ECharts中yAxis结构的封装。
public class YAxis
{
 /// 

 /// 坐标轴类型
 /// 
 public string type { get; set; } = "value";
}


ECharts中系列集合元素的封装。
public class SeriesItem
{
 /// 

 /// 每个系列通过 type 决定自己的图表类型
 /// 
 public string type { get; set; }
 /// 

 /// 系列中的数据内容数组
 /// 
 public List data { get; set; }
}


ECharts中期权结构的封装。
public class Option
{
 /// 

 /// x轴
 /// 
 public XAxis xAxis { get; set; }
 /// 

 /// y轴
 /// 
 public YAxis yAxis { get; set; }
 /// 

 /// 数据
 /// 
 public List series { get; set; }
}


总结
百度示例代码：
option = {
 xAxis: {
 type: 'category',
 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 data: [120, 200, 150, 80, 70, 110, 130],
 type: 'bar'
 }]
};


封装成控件后的调用代码：

private List GetXAxisData()
{
 List reslt = new List
 {
 "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
 };
 return reslt;
}
private List GetSeriesData()
{
 List result = new List();
 SeriesItem item = new SeriesItem
 {
 type = "bar",
 data = new List
 {
 120, 200, 150, 80, 70, 110, 130
 }
 };
 result.Add(item);
 return result;
}
private void FormMain_Load(object sender, EventArgs e)
{
 Option option = new Option
 {
 title = new Title
 {
 text= "ECharts 入门示例",
 },
 xAxis = new XAxis
 {
 type = "category",
 data = GetXAxisData()
 },
 yAxis = new YAxis
 {
 type = "value"
 },
 series = GetSeriesData()
 };
 echartsMain.InitialECharts(option);
}


图表显示如下：
图形显示
当然，我们封装百度的Echarts并不是一时兴起。 学习任何技术的目的都必须应用到实践中才能体现技术的价值。
应用01
应用02
好了echarts 参数，今天就到此为止！ 再见！
相关图片及文字：