For graphing charts in the browser, there are more js library can be used, such as: ChartJS, Flot, canvasjs, etc., but the main character introduced today for the domestic chart library, and apache hatch, is the famous echarts.
The official presentation in front of the high-energy []
Characteristics - Apache ECharts (incubating)
ECharts, an open source JavaScript implementation visualization library, can smoothly run on the PC and mobile device, much of the current compatible browser (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.), the underlying pattern dependency vector library ZRender, provides an intuitive, interactive rich, highly personalized custom data visualization charts.
Rich visualization types
ECharts provide a general line graph, bar graph, scatter, pie, K line graph, a statistical boxplot a geographic map data visualization, thermodynamic diagram, diagram, a relational data visualization diagram, TreeMap, FIG sun, multidimensional data visualization parallel coordinates, and FIG funnel for BI, dashboards, and supports between mashup FIG Fig.
In addition to already contains a built-in feature-rich charts, ECharts also provides custom series, only need to pass a renderItem function, can be mapped to data from any graphic you want, even better is that these are still and have some interactive component used in combination without the need to worry about other things.
You can download a chart of all the files in the download interface construction, if only need one or two charts, they complain that contains all the chart build file is too large, you can also choose to custom build the chart type you want in the online build.
Multiple data formats directly without conversion
ECharts built dataset attributes (4.0+) supports direct incoming data source comprises a plurality of two-dimensional table format, key-value, etc., by simply setting properties can encode data from the mapping pattern, in this way more in line intuitive visualization, eliminating the steps of converting the majority of scene data, and a plurality of components to share data without cloning.
To cope with the large amount of data presentation, ECharts TypedArray also supports input data format, TypedArray large amount of data storage can take up less memory, friendship and other characteristics of the GC can also greatly enhance the performance visualization applications.
practice
1, using VS2019 to create a asp.net core web project, select ASP.NET Core Web 应用程序and use the Web应用程序(模型视图控制器)template
2, libman add echarts library
Select the project name in the Solution Explorer -> wwwroot-> lib, lib folder in the right-click, select: Add -> Client Library, pop-up input echarts, automatically bring out the latest version, due to the use cdnjs, the latest version is 4.3.0 above, in others, such as: jsdelivr, unpkg on top of the latest version is 4.5.0. But the use of jsdelivr, unpkg now 4.5.0 version fails, so I chose cdnjs 4.3.0 above.
Episode: When in the pop-client library typing, if when the Chinese input method, have entered some text, switch to English input method, will lead vs2019 restart, so when a client library window, enter the content must be switched to English before Input
3, to add a Action, named Echarts, and add the appropriate view
Add the following code in a view, idas mychartthe div chart for placement echarts
<div class="row">
<div class="col-md-12">
<div id="myechart" style="width: 100%; height: 500px;">
</div>
</div>
</div>Add a reference to the relevant js
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/echarts/echarts.js"></script>4, Echarts
Json data stored ready to github above: https://github.com/mzy666888/datajson
write js code below referenced js library use echarts display charts.
First, it defines a structure for storing data.
function Series(type, xdata, seriesData) {
this.typeName = type;//相当于title
this.xdata = xdata;//X轴数据
this.seriesData = seriesData;//Y轴数据
}Charts declare an instance.
> echartInstance.clear:
Clear the current instance, will remove all the components and charts instance. Call getOption method returns an empty object {} after emptying. When multiple queries will need to clear the contents of the last added
var myEChart = echarts.init(document.getElementById('myechart'));
myEChart.clear();//用于清除已存在的内容Defined option
var options = {
title: {
text: '数据曲线：',
x: 'center'
},
legend: {
data: [],
x: 'left'
},
xAxis: {
type: 'category'//必须
},
yAxis: {
type: 'value',
max: 90,
min: -10
},
series: []
}Settings myEChartoption of
myEChart.setOption(options);Json data acquisition, and data after processing to the display myEChart,
$.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);
});Description 1
This code is processed after json data, the x, y-axis data is stored separately to the array of 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);
});Note 2
For the option of xAxiscontent-axis processing
var xStart = data.Start;
var xEnd = data.End;
options.xAxis.data = x[0].xdata;
options.xAxis.start = xStart;
options.xAxis.end = xEnd;Note 3
To the option title, legend, seriesthe contents of the processing axis
$.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`的option
myEChart.setOption(options);
### 5、运行程序
点击“CTRL+F5”运行程序，切换到相应的action，可以看到图表显示如下内容，所有的数据都正确的显示了。
到目前为止，贴出上面完整的代码，到目前为止，你已经可以使用echarts处理图表问题了：
### 6、功能扩展
###### 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项扩展后，完整代码如下：
`` `
Give attention:
