绘制水晶报表

开发工具与关键技术：DW
作者：胡名权
撰写时间：2019年5月7日

水晶报表是我们在建页面的时候常常会用到的，用它来显示数据的一个情况，方便、易懂，操作起来也是简单的，更能让我们清楚的看到它所展现的数据信息。那么这次我们就一起来研究一下绘制水晶报表。
首先我们定义它的一个全局变量，然后来写它的方法，用function封装。基于准备好的dom，初始化echarts实例，如果存在，就销毁后再次初始化，

if (PieChart != undefined) {
                 PieChart.dispose();
             }
             PieChart = echarts.init(document.getElementById('chartOne'));

接着，我们要对相应数据进行设置，以达到我们想要的形状和数据等，

var option1 = {
                 title: {
                     text: textName,
                     left: "left",
                     textStyle: {
                         fontSize: 18,
                     }
                 },

这个是我们的一些配置项，title是标题，text跟的是文本名称，然后让它有一个靠左显示，再设置它的字体大小。

接着配置图例组件，orient图例列表的布局朝向，要是有不明白的地方可以区earch插件里面区调试，然后看它的样式变化来了解它的意思等。

对应的里面的显示的数据情况，type类型选你想要的形状图，radius：第一项为零，它指的是这个圆里面的圈的半径，将它设置为零，就没有这个圈了。第二个项指的是它的形状。
然后就调用，判断它是否有值

PieChart.setOption(option1);

             if (PieChartDetail != undefined) {
                 PieChartDetail.dispose();
             }

基于准备好的dom，初始化echerts实例
PieChartDetail = echarts.init(document.getElementById(“chartTwo”));
接着就是实例化

legend:饼状图里面所要显示的数据的情况，然后就是让它在饼图中显示就加上如下的代码

例举了一些数据来代表，就不一一诠释了，那么这样一个饼状图就弄出来了。
还有一些条形图，折线图之类的，那么，接着来说一下这个条形图。
if (BarChart != undefined) {
BarChart.dispose();
}
如果存在，就销毁后再初始化，
BarChart = echarts.init(document.getElementById(“nav-bar”));
然后就是它的一个配置项的设置，

var option3 = {
                 title: {
                     text: textName,
                     left: 'left',//离容器左侧的距离 20px, 20%, 'left', 'center', 'right'
                     textStyle: {
                         fontSize: 16,
                     }
                 },

tooltip: {提示框组件
trigger: ‘axis’//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用， trigger：’item’数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
},

legend: {
data: [{ name: “人数” }],
left: ‘right’//图例组件离容器左侧的距离。 20px, 20%，‘left’, ‘center’, ‘right’
},
yAxis: [//直角坐标系 grid 中的 y 轴
{
name: ‘人数’,
nameLocation: ‘end’,
type: ‘value’,//‘value’ 数值轴，适用于连续数据。
xAxis: [//直角坐标系 grid 中的 x 轴
{
name: ‘分数段’,
nameLocation: ‘end’,//‘start’, ‘middle’, ‘end’
type: ‘category’,//坐标轴类型。 'category’类目轴，适用于离散的类目数据，为该类型时必须通过data 设置类目数据
data: [“0~29分”, ‘30~59分’, “60~69分”, “70~79分”, “80~89分”, “90~92分”, “93~95分”, “96~97分”, “98~99分”, “100分”]
//类目数据，在类目轴（type: ‘category’）中有效。
}
],
那么大概的一个情况就是这样的，我们对其可以进行修改，变更数据，来达到想要的一个样式，
中间的series：是系列列表，每个系统通过tpye决定自己的图表类型。
其中的相同的部门就没有再说了，就看看这些不同的地方，然后一起学习一下。
那么到这里我们的这个图表就绘制结束了。不管会不会大家一起学习。