使用Echarts制作散点图

前几天为了画一张图，使用了开源类库LiveCharts做了一个WPF的小程序，效果还算不错，但是也发现LiveCharts的功能还并不是很丰富，比如没法直接将图表另存为图片，总是用截屏就比较Low了，所以想到了Echarts。

解决思路

Echarts是一款功能比较丰富的js图表库，也有完善的文档资料。基于javascript和html开发的话对环境的要求也不高，难度也低于C#这样的语言。对于没有什么编程基础的人来讲也比较好接受，自己按照文档修改一些功能代码页比较简单。
从官网上的示例来看，制作包括散点图在内的图表的核心是一个标准的JSON数据结构，只要按照官方文档的说明搭建合适的JSON结构，几乎可以实现任何想要的效果，当然前提是Echarts能实现的效果。
基于以上原因要做一个Ehcarts的图表页面，不过有一个问题是需要从外部文件如Excel文件读取数据，个人感觉使用js解析Excel效率比较低，能否将之前WPF解析Excel数据的方案利用起来呢？而且Echarts的核心就是一个JSON结构，能否将从Excel解析出来的数据直接输出成符合Echarts的数据结构呢？答案是肯定的，确认方案如下：

WPF解析Excel

WPF输出JSON文件

JavaScript读取JSON文件

Echarts呈现图表

实现过程

WPF解析Excel

这一步在上篇文章已经讲过，使用的是Aspose.Cells类库来解析Excel，过程不再细说。
WPF随笔（八）–使用LiveCharts创建散点图

WPF输出JSON文件

由于Echarts里图表的数据源格式基本都为数组，散点图则是二维数组，所以优先将LiveCharts里的ScatterSeries类转换为二维数组。

        private double[,] ConvertSeriesToArray(ScatterSeries series){int count = series.Values.Count;double[,] datas = new double[count, 2];for (int i = 0; i < count; i++){datas[i, 0] = ((ScatterPoint)series.Values[i]).X;datas[i, 1] = ((ScatterPoint)series.Values[i]).Y;}return datas;}

之后将二维数组序列化后输出到文件。

        private void WriteToJsonFile(object datas, string filePath){string json = Newtonsoft.Json.JsonConvert.SerializeObject(datas);//string basePath = AppDomain.CurrentDomain.BaseDirectory;//string fileName = "data.json";//string filePath = basePath + "\\" + fileName;FileStream fs;StreamWriter sw;if (File.Exists(filePath))//验证文件是否存在，有则覆盖，无则创建{fs = new FileStream(filePath, FileMode.Truncate, FileAccess.Write);}else{fs = new FileStream(filePath, FileMode.Create, FileAccess.Write);}sw = new StreamWriter(fs);sw.WriteLine(json);sw.Close();fs.Close();}

其中文件路径可以选择指定的文件来输出。

        #region 输出为JSON文件private void btnJson_Click(object sender, RoutedEventArgs e){System.Windows.Forms.OpenFileDialog dialog = new System.Windows.Forms.OpenFileDialog();dialog.Filter = "JSON(*.json)|*.json";System.Windows.Forms.DialogResult result = dialog.ShowDialog();if (result == System.Windows.Forms.DialogResult.OK){try{string fileName = dialog.FileName;//获取文件路径Double[,] data = ConvertSeriesToArray(ScatterSeries);//转换为二维数组WriteToJsonFile(data, fileName);//输出JSON文件}catch (Exception ex){MessageBox.Show(ex.Message);}}}#endregion

JavaScript读取JSON文件

JS读取JSON文件可以使用jQuery的Ajax或者getJson方法。

             $.getJSON("data.json",function(result){console.log(result);})

Echarts呈现图表

页面完整代码如下：

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="Scripts/echarts.min.js"></script><!--引入shine主题--><script type="text/javascript" src="Scripts/shine.js"></script><script type="text/javascript" src="Scripts/jquery.min.js"></script><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom,'shine');//第二个参数指定引入的主题var app = {};$(function(){$.getJSON("data.json",function(result){var option = {title: {text: '主标题',subtext: '副标题'},toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'},saveAsImage: {}}},color:['#2f4554', '#61a0a8', '#d48265'],tooltip: {trigger: 'item',axisPointer: {type: 'cross'}},xAxis: {scale: true,name:'X轴名称',nameLocation:'end'},yAxis: {scale: true,name:'Y轴名称',nameLocation:'end'},series: [{type: 'scatter',data: result,markLine:{data:[{name:'1.3',yAxis:1.3}]}}]};if (option && typeof option === "object") {myChart.setOption(option, true);}})})</script></body>
</html>

最后来张完成的效果图：

没有什么高深的东西，但有趣的是过程。