~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~开发工具与关键技术:Visual Studio 2015 C#
作者: 李杨
撰写时间:2019-07-15
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在mvc开发项目我们会常用到echarts里面的图表这些。
因为在最近的学习中,开发项目运用到了echarts图表的关系
接下来我就来讲一个比较简单的图表。
引用echarts的话其实从echarts3开始就不再强制使用AMD的方式按需引入,代码里也不再内置AMD加载器。因此引入方式的话简单了很多,就是只需要像普通的javascript·库一样用scrip标签引入就可以了。
所以接下来就来讲一讲echarts图表要怎么引用。
首先我们要先在视图的heml里面写样式。用来放置图表的盒子。就是具备大小宽高的demo。
如图:
然后echarts里面也有很多的配置项属性。我们可以来了解其中的一些。比如legend图例组件
图例组件展现了不同系列的标记颜色和名字。可以通点击图例控制哪些系列不显示。
比如legend.zlevel所有图形的zlevel值。Zlevel用于Canvas分层额,不同的zlevel值的图形会放置在不同的Canvas中,Canvas分层是一种常见的优化手段。我们可以把一些图形变化频繁(比如说有动画)的组件设置成一个单独的zlevel。需要注意的是过多的Canavs会引起内存开销的增大,在手机端上需要谨慎使用防止崩溃。
legend.z 组件的所有图形的z值。控制图形的前后顺序。Z值小的图形会被z值大的图形覆盖。
Z相比zlevel优先级更低,而且不会创建新的Canvas。
然后接下来我们就要去echarts里面找想要的图表样式。
所以说接下来我们就可以通过一个echarts.init的方法初始化一个echarts实例 ,并通过
setOption方法生成一个简单的柱状图,我们可以来看一下下面的代码。
先是基于我们准备好的demo的那个盒子,然后我们就要去初始化echarts实例
然后就去指定图表的配置项和数据。
自己需要什么数据就可以在对应的配置项里面打上自己需要的数据。
我们把数据写完之后就要使用我们刚刚填写好的配置项和数据来显示图表。
如下图代码:
如果图表要显示数据库中的数据的话就要去控制器写方法。再去视图写方法。
然后接下来可以看看刚刚代码完成后图表的样式。在echarts的实例上面五分钟上手就有怎么使用的步骤。如果不懂的话可以去上面看看。
如下图: