合肥手机网站建设,如果做网站推广,想查客户信息做网站,php网站制作报价对于在浏览器中绘制图形图表#xff0c;目前有较多的js类库可以使用#xff0c;如#xff1a;ChartJS#xff0c;Flot#xff0c;canvasjs等#xff0c;但是今天介绍的主角为国产图表库#xff0c;并在apache孵化#xff0c;就是大名鼎鼎的echarts。前方高能【官方介绍… 对于在浏览器中绘制图形图表目前有较多的js类库可以使用如ChartJSFlotcanvasjs等但是今天介绍的主角为国产图表库并在apache孵化就是大名鼎鼎的echarts。前方高能【官方介绍】特性 - Apache ECharts (incubating)ECharts一个使用 JavaScript 实现的开源可视化库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。丰富的可视化类型ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图用于统计的盒形图用于地理数据可视化的地图、热力图、线图用于关系数据可视化的关系图、treemap、旭日图多维数据可视化的平行坐标还有用于 BI 的漏斗图仪表盘并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表ECharts 还提供了自定义系列只需要传入一个renderItem函数就可以从数据映射到任何你想要的图形更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。你可以在下载界面下载包含所有图表的构建文件如果只是需要其中一两个图表又嫌包含所有图表的构建文件太大也可以在在线构建中选择需要的图表类型后自定义构建。多种数据格式无需转换直接使用ECharts 内置的 dataset 属性4.0支持直接传入包括二维表key-value 等多种格式的数据源通过简单的设置 encode 属性就可以完成从数据到图形的映射这种方式更符合可视化的直觉省去了大部分场景下数据转换的步骤而且多个组件能够共享一份数据而不用克隆。为了配合大数据量的展现ECharts 还支持输入 TypedArray 格式的数据TypedArray 在大数据量的存储中可以占用更少的内存对 GC 友好等特性也可以大幅度提升可视化应用的性能。实践1、 使用VS2019创建一个asp.net core web项目选择ASP.NET Core Web 应用程序并使用Web应用程序(模型视图控制器)模板2、使用libman添加echarts库在解决方案资源管理器中选择项目名称-wwwroot-lib在lib文件夹上右击选择添加-客户端库弹出窗口输入echarts自动带出最新的版本由于使用了cdnjs上面最新版为4.3.0在其他的如jsdelivr、unpkg上面最新版为4.5.0。不过使用jsdelivr、unpkg现在4.5.0版本失败所以选择了cdnjs上面的4.3.0版本。 插曲在弹出的客户端库输入内容时如果时中文输入法已输入部分文字切换为英文输入法时会导致vs2019重启所以在客户端库窗口输入内容时一定要前切换到英文输入法3、添加一个action名为Echarts,并添加相应的视图在视图中添加如下代码id为mychart的div用于放置echarts图表 div classrow div classcol-md-12 div idmyechart stylewidth: 100%; height: 500px; /div /div /div添加相关js的引用script src~/lib/jquery/dist/jquery.js/scriptscript src~/lib/echarts/echarts.js/script4、使用Echarts准备的json数据存放到了github上面https://github.com/mzy666888/datajson本文中将data.json放在wwwroot目录下面了。在引用的的js库的下方编写js代码使用echarts显示图表。首先定义了一个结构用于存放数据。function Series(type, xdata, seriesData) { this.typeName type;//相当于title this.xdata xdata;//X轴数据 this.seriesData seriesData;//Y轴数据 }声明一个charts实例。 echartInstance.clear清空当前实例会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。在多次查询时需要用到清除上次添加的内容var myEChart echarts.init(document.getElementById(myechart));myEChart.clear();//用于清除已存在的内容定义optionvar options { title: { text: 数据曲线, x: center }, legend: { data: [], x: left }, xAxis: { type: category//必须 }, yAxis: { type: value, max: 90, min: -10 }, series: [] }设置myEChart的optionmyEChart.setOption(options);获取json数据显示 $.get(/data.json).done(function (data) { //var aa JSON.parse(data); var x []; $.each(data.List, function (n, value) { var xd [], sd []; $.each(value.Data, function (m, mValue) { xd.push(mValue.SaveTime); sd.push(mValue.WorkStationData); }); var s new Series(value.TypeTitleName, xd, sd); x.push(s); }); var xStart data.Start; var xEnd data.End; options.xAxis.data x[0].xdata; options.xAxis.start xStart; options.xAxis.end xEnd; $.each(x, function (i, value) { options.title.text value.typeName ; options.legend.data.push(value.typeName); options.series.push({ name: value.typeName, type: line, smooth: true, data: value.seriesData }); }); myEChart.setOption(options); });说明1此段代码是将json数据处理后将xy轴的数据分开存到到数组x中 var x []; $.each(data.List, function (n, value) { var xd [], sd []; $.each(value.Data, function (m, mValue) { xd.push(mValue.SaveTime); sd.push(mValue.WorkStationData); }); var s new Series(value.TypeTitleName, xd, sd); x.push(s); });说明2对option的xAxis轴的内容进行处理var xStart data.Start;var xEnd data.End;options.xAxis.data x[0].xdata;options.xAxis.start xStart;options.xAxis.end xEnd;说明3对option的title、legend、series轴的内容进行处理 $.each(x, function (i, value) { options.title.text value.typeName ; options.legend.data.push(value.typeName); options.series.push({ name: value.typeName, type: line, smooth: true, data: value.seriesData }); });说明4设置myEChart的optionmyEChart.setOption(options);5、运行程序点击“CTRLF5”运行程序切换到相应的action可以看到图表显示如下内容所有的数据都正确的显示了。到目前为止贴出上面完整的代码到目前为止你已经可以使用echarts处理图表问题了script typetext/javascript //定义类 function Series(type, xdata, seriesData) { this.typeName type; this.xdata xdata; this.seriesData seriesData; } var myEChart echarts.init(document.getElementById(myechart)); myEChart.clear(); var options { title: { text: 数据曲线, x: center }, legend: { data: [], x: left }, xAxis: { type: category }, yAxis: { type: value, max: 90, min: -10 }, series: [] } myEChart.setOption(options); $.get(/data.json).done(function (data) { //var aa JSON.parse(data); var x []; $.each(data.List, function (n, value) { var xd [], sd []; $.each(value.Data, function (m, mValue) { xd.push(mValue.SaveTime); sd.push(mValue.WorkStationData); }); var s new Series(value.TypeTitleName, xd, sd); x.push(s); }); var xStart data.Start; var xEnd data.End; options.xAxis.data x[0].xdata; options.xAxis.start xStart; options.xAxis.end xEnd; $.each(x, function (i, value) { options.title.text value.typeName ; options.legend.data.push(value.typeName); options.series.push({ name: value.typeName, type: line, smooth: true, data: value.seriesData }); }); myEChart.setOption(options); });/script6、功能扩展6.1 图表左右空白较多为了解决图表中左右空白较多的问题可以在options中添加如下内容 grid: { show: true, borderColor: #19507c, x: 50, x2: 50, y: 40 },6.2 鼠标滑过提示上面的截图我们使用数据划过图表时不能现在当前时间上各项数据在options中添加如下代码可以实现鼠标滑过显示各项数据的功能。 tooltip: { trigger: axis, axisPointer: { type: cross, animation: false, label: { backgroundColor: #505765 } } },6.3 添加相关功能按钮使用如下设置添加了3个按钮分别为区域缩放区域缩放还原和还原。区域缩放可以在图标上按住鼠标左键用鼠标滑定一段区域显示滑定区域的数据相当于区域放大区域缩放还原还原到初始状态还原就是还原功能 toolbox: { feature: { dataZoom: { yAxisIndex: none }, restore: {}, saveasImage: {} } },6.4 区域缩放dataZoom 组件 用于区域缩放从而能自由关注细节的数据信息或者概览数据整体或者去除离群点的影响。 dataZoom: [ { show: true, realtime: true, start: 80, end: 100 }, { type: inside, realtime: true, start: 65, end: 100 } ],添加完4项扩展后完整代码如下script typetext/javascript //定义类 function Series(type, xdata, seriesData) { this.typeName type; this.xdata xdata; this.seriesData seriesData; } var myEChart echarts.init(document.getElementById(myechart)); myEChart.clear(); var options { title: { text: 数据曲线, x: center }, grid: { show: true, borderColor: #19507c, x: 50, x2: 50, y: 40 }, toolbox: { feature: { dataZoom: { yAxisIndex: none }, restore: {}, saveasImage: {} } }, tooltip: { trigger: axis, axisPointer: { type: cross, animation: false, label: { backgroundColor: #505765 } } }, legend: { data: [], x: left }, dataZoom: [ { show: true, realtime: true, start: 80, end: 100 }, { type: inside, realtime: true, start: 65, end: 100 } ], xAxis: { type: category, offset: 30 }, yAxis: { type: value, max: 90, min: -10 }, series: [] } myEChart.setOption(options); $.get(/data.json).done(function (data) { //var aa JSON.parse(data); var x []; $.each(data.List, function (n, value) { var xd [], sd []; $.each(value.Data, function (m, mValue) { xd.push(mValue.SaveTime); sd.push(mValue.WorkStationData); }); var s new Series(value.TypeTitleName, xd, sd); x.push(s); }); var xStart data.Start; var xEnd data.End; options.xAxis.data x[0].xdata; options.xAxis.start xStart; options.xAxis.end xEnd; $.each(x, function (i, value) { options.title.text value.typeName ; options.legend.data.push(value.typeName); options.series.push({ name: value.typeName, type: line, smooth: true, data: value.seriesData }); }); myEChart.setOption(options); });/script·END·DotNetCore学习站超乎想象的.NET Core学习资源微信号DotNetCore学习站
