前端小白在asp.net core mvc中使用ECharts

时间  2019-11-21
标签 前端 asp.net asp core mvc 使用 echarts 栏目 ASP 繁體版
原文   原文链接

对于在浏览器中绘制图形图表，目前有较多的js类库可使用，如：ChartJS，Flot，canvasjs等，可是今天介绍的主角为国产图表库，并在apache孵化，就是大名鼎鼎的echarts。jquery

前方高能【官方介绍】git

特性 - Apache ECharts (incubating)

ECharts，一个使用 JavaScript 实现的开源可视化库，能够流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。github

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，而且支持图与图之间的混搭。web

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只须要传入一个renderItem函数，就能够从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不须要操心其它事情。apache

你能够在下载界面下载包含全部图表的构建文件，若是只是须要其中一两个图表，又嫌包含全部图表的构建文件太大，也能够在在线构建中选择须要的图表类型后自定义构建。json

多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，经过简单的设置 encode 属性就能够完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，并且多个组件可以共享一份数据而不用克隆。canvas

为了配合大数据量的展示，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中能够占用更少的内存，对 GC 友好等特性也能够大幅度提高可视化应用的性能。数组

实践

一、 使用VS2019建立一个asp.net core web项目，选择ASP.NET Core Web 应用程序，并使用Web应用程序(模型视图控制器)模板

二、使用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重启，因此在客户端库窗口输入内容时必定要前切换到英文输入法echarts

三、添加一个action，名为Echarts,并添加相应的视图

在视图中添加以下代码，id为mychart的div用于放置echarts图表

<div class="row">
<div class="col-md-12">
<div id="myechart" style="width: 100%; height: 500px;">

</div>
</div>
</div>

添加相关js的引用

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/echarts/echarts.js"></script>

四、使用Echarts

准备的json数据存放到了github上面：https://github.com/mzy666888/datajson
在引用的的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();//用于清除已存在的内容

定义option

var options = {
        title: {
            text: '数据曲线：',
            x: 'center'
        },
        
        legend: {
            data: [],
            x: 'left'
        },
        
        xAxis: {
            type: 'category'//必须
        },
        yAxis: {
            type: 'value',
            max: 90,
            min: -10
        },
        series: []
    }

设置myEChart的option

myEChart.setOption(options);

获取json数据，通过处理后并将数据显示到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);

    });
说明1

此段代码是将json数据处理后，将x，y轴的数据分开存到到数组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`的option

myEChart.setOption(options);

### 五、运行程序
点击“CTRL+F5”运行程序，切换到相应的action，能够看到图表显示以下内容，全部的数据都正确的显示了。
![](https://img2018.cnblogs.com/blog/1746998/201911/1746998-20191121084936137-183805478.png)


到目前为止，贴出上面完整的代码，到目前为止，你已经可使用echarts处理图表问题了：
### 六、功能扩展

###### 6.1 图表左右空白较多
为了解决图表中左右空白较多的问题，能够在options中添加以下内容：
grid: {
        show: true,
        borderColor: '#19507c',
        x: 50,
        x2: 50,
        y: 40
    },
![](https://img2018.cnblogs.com/blog/1746998/201911/1746998-20191121084959477-981010092.png)

###### 6.2 鼠标滑过图表显示当前时间的各项数据内容
上面的截图，咱们使用数据划过图表时，不能如今当前时间上各项数据，在options中添加以下代码能够实现鼠标滑过显示各项数据的功能。
tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            animation: false,
            label: {
                backgroundColor: '#505765'
            }
        }
    },
![](https://img2018.cnblogs.com/blog/1746998/201911/1746998-20191121085018478-908000477.png)


###### 6.3 添加相关功能按钮
使用以下设置，添加了3个按钮，分别为：区域缩放，区域缩放还原和还原。
区域缩放：能够在图标上按住鼠标左键，用鼠标滑定一段区域，显示滑定区域的数据，至关于区域放大
区域缩放还原：还原到初始状态
还原：就是还原功能
toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveasImage: {}
        }
    },
![](https://img2018.cnblogs.com/blog/1746998/201911/1746998-20191121085036835-316142579.png)


###### 6.4 区域缩放
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据总体，或者去除离群点的影响。
dataZoom: [
        {
            show: true,
            realtime: true,
            start: 80,
            end: 100
        },
        {
            type: 'inside',
            realtime: true,
            start: 65,
            end: 100
        }
    ],
![](https://img2018.cnblogs.com/blog/1746998/201911/1746998-20191121085050551-185052507.png)


添加完4项扩展后，完整代码以下：

```

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程