EChart图表

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015 * SQL Server

作者：叶

撰写时间：2019年01月01日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

EChart图表，是一个纯Javascript的图表库，可以流畅的运行在PC和移动端设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。在项目中使用EChart图表可以直观的看清数据，以下在WPF中应用。其它的图表方法大体一样，如果想换其他图表dataSeries.RenderAs = RenderAs.Doughnut即可。

在此之前先引用一下外部插件：

EChart图表

#region 车辆的类型统计（柱状图）

//车辆类型数据

DataTable dt = myClient.UserControl_SelectTrainSum().Tables[0];

//表示可通过索引访问的对象的强类型列表。提供用于队列表进行搜索，排序和操作方法。

List<string> strx = new List<string>();

List<string> stry = new List<string>();

for (int i = 0; i < dt.Rows.Count; i++)

{

strx.Add(dt.Rows[i]["name"].ToString().Trim());

stry.Add(dt.Rows[i]["次数"].ToString().Trim());

CreateCharColumn("车辆的类型统计", strx, stry);

}

#endregion

#region 创建柱状图

public void CreateCharColumn(string name, List<string> valuex, List<string> valuey)

{

//创建一个图标

Chart chart = new Chart();

//设置图标的宽度和高

chart.Width = 500;

chart.Height = 250;

chart.Margin = new Thickness(-550, -300, 0, 0);

//是否启用打印和保存图片

chart.ToolBarEnabled = true;

//设置图标的属性

chart.ScrollingEnabled = false;//是否启用或禁用滚动

chart.View3D = true;//3D效果显示

//创建一个标题的对象

Title title = new Title();

//Brushes.Gainsboro;

//设置标题的名称

title.Text = name;

//title.FontColor = System.Windows.Media.Brushes.Red;

title.Padding = new Thickness(0, 10, 5, 0);

//向图标添加标题

chart.Titles.Add(title);

Axis yAxis = new Axis();

//设置图标中的y轴的最小值永远为0

yAxis.AxisMinimum = 0;

//设置图表中y轴的后缀

yAxis.Suffix = "辆";

chart.AxesY.Add(yAxis);

//创建一个新的数据线

DataSeries dataSeries = new DataSeries();

//设置数据线的格式

//Pyramid黄金三角 Radar蜘蛛网 SectionFunnel 倒圆锥形 Spline折线图 StackedArea ,Area 连起来的柱状图 StackedArea100墙横向柱状图

dataSeries.RenderAs = RenderAs.Doughnut;

//设置数据点

DataPoint dataPoint;

for (int i = 0; i < valuex.Count; i++)

{

//创建一个数据点的实例

dataPoint = new DataPoint();

//设置X轴点

dataPoint.AxisXLabel = valuex[i];

//设置Y轴点

dataPoint.YValue = double.Parse(valuey[i]);

//添加一个点击事件

dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);

//添加数据点

dataSeries.DataPoints.Add(dataPoint);

}

//添加数据线导数据序列

chart.Series.Add(dataSeries);

//将生产的图表增加到grid，然后通过grid添加到上层grid

Grid gr = new Grid();

gr.Children.Add(chart);

Simon.Children.Add(gr);

}

#endregion

EChart图表

如果想给它一个点击事件，弹出提示框。

//添加一个点击事件

dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);

//表格事件创建

private void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

DataPoint dp = sender as DataPoint;

MessageBox.Show(dp.YValue.ToString());

}