在Axure原型中使用EchartsP1_axhub插件

记录Echarts在Axure里面的一些简单配置，针对大部分原型来讲已经足够用了。

一、Axhub插件引入

  Axhub为axure画原型的元件库，利用Axhub官网的一些描述“高效率设计，高保真演示，低代码开发”，里面有超多元件库，包括动态图表、地理可视化、动态文本、前端框架。
  Axhub官网：https://axhub.im/charts/
  收费规则：收费为一次性收费，个人版：单账号38￥，企业版：两个账号合计69￥，旗舰版：提供远程培训、在线答疑249￥。 个人觉得个人版已经够用了。

（axhub支持在线版和离线版的配置）

二、Echarts基础配置

Echarts官网：https://echarts.apache.org/examples/zh/index.html

1、柱状图

（1）基础设置

【示例一】
  对图的类型转换查看、保存当前图表为图片、下载图表：option>toolbox>feature

option = {
    xAxis: {
        //X轴类型：目录
        type: 'category',
        //X轴-维度
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
       //横坐标格子是否显示
       splitLine: { show: false },
    },
    yAxis: { type: 'value' },
   //整个图表的边距设置
	grid: {
	    left: '3%',
	    right: '4%',
	    bottom: '3%',
	    containLabel: true
	},
	//操作区
    toolbox: {
        feature: {
          //这些图与柱状图之间的转换
          magicType: { show: true, type: ['line', 'bar'] },
          //刷新
          restore: { show: true },
          //保存为图片
          saveAsImage: { show: true }
         //切换为表格形式
         //  dataView:{ show:true }
        },       
    },
    //浮框显示坐标值
    tooltip: {
	//此区域的样式和值可以根据trigger、axisPointer、formatter等配置
	//参考网站：https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall
	},
    //series配置
    series: [
        {
            //y轴-数据
            data: [120, 200, 150, 80, 70, 110, 130, 122, 140, 210, 102, 302,],
            //柱状颜色
            color:'rgb(8, 194, 94)',
            //类型：柱状图
            type: 'bar',
	                backgroundStyle: {
	                  //柱状背景色
	                color: 'rgba(180, 180, 180, 0.2)'
	              }
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

生成图表如下：

【示例二】

option = {
	//跟随数据移动的坐标值信息-浮框 
	tooltip: {},
	//图表配色示图
	legend: {
		// Try 'horizontal'
		orient: 'vertical',
		right: 10,
		top: 'center'
	},
	//设置数据
	dataset: {
		source: [
		 //第一列：X轴
		    ['product', '2015', '2016', '2017'],
		    ['Matcha Latte', 43.3, 85.8, 93.7],
		    ['Milk Tea', 83.1, 73.4, 55.1],
		    ['Cheese Cocoa', 86.4, 65.2, 82.5],
		    ['Walnut Brownie', 72.4, 53.9, 39.1]
		]
	},
	//X轴目录
	xAxis: { type: 'category' },
	yAxis: {},
	//图表类型
	series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

生成图表如下：


若X某坐标有多组Y数据，希望查看X某点查看该点Y的所有数据：

tooltip: {
	trigger: 'axis',
	axisPointer: {
		type: 'shadow'
	}
},
1
2
3
4
5
6

（2）柱状图样式设置
柱条的样式可以通过 series.itemStyle 设置，包括：

• 柱条的颜色（color）
• 柱条的描边颜色（borderColor、borderWidth、borderType）
• 柱条圆角的半径（barBorderRadius）
• 柱条透明度（opacity）
• 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）

option = {
	xAxis: {
	    data: ['A', 'B', 'C', 'D', 'E']
	},
	yAxis: {},
	series: [
	    {   type: 'bar',
		    data: [
		        10,
		        22,
		        28,
		        {
		        value: 43,
		        // 设置单个柱子的样式
		            itemStyle: {
		            color: '#91cc75',
		            shadowColor: '#91cc75',
		            borderType: 'dashed',
		            opacity: 0.5
		            }
		        },
		       49
		        ],
		    //设置所有柱子的样式
		    itemStyle: {
		        barBorderRadius: 12,
		        borderWidth: 2,
		        borderType: 'solid',
		        borderColor: 'red',
		        shadowColor: '#5470c6',
		        shadowBlur: 3,
		        color:'red'
		    }
	    }
	]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

生成图表如下：

在这个例子中，我们通过设置柱状图对应 series 的itemStyle，设置了柱条的样式。
（3）柱条宽度和高度
  柱条宽度可以通过 barWidth 设置。比如在下面的例子中，将 barWidth 设为 ‘20%’，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。

option = {
	xAxis: {
		data: ['A', 'B', 'C', 'D', 'E']
	},
	yAxis: {},
	series: [
		{
		type: 'bar',
		data: [10, 22, 28, 43, 49],
		barWidth: '80%'
		}
	]
};
1
2
3
4
5
6
7
8
9
10
11
12
13

生成图表如下：

  另外，还可以设置 barMaxWidth 限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度 barMinHeight，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。

（4）柱条间距
  柱条间距分为两种，一种是不同系列在同一类目下的距离 barGap，另一种是类目与类目的距离 barCategoryGap。

option = {
	xAxis: {
	    	data: ['A', 'B', 'C', 'D', 'E']
	},
	yAxis: {},
	series: [
	    {
		    type: 'bar',
		    data: [23, 24, 18, 25, 18],
		    //间距控制
		    barGap: '20%',
		    barCategoryGap: '40%'
	    },
	    {
		    type: 'bar',
		    data: [12, 14, 9, 9, 11]
	    }
	]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

生成图表如下：
  在这个例子中，barGap 被设为 ‘20%’，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 barCategoryGap 是 ‘40%’，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。
  通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。

在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。

（5）为柱条添加背景色
  有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用 showBackground 开启，并且可以通过 backgroundStyle 配置。

option = {
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
		data: [120, 200, 150, 80, 70, 110, 130],
		type: 'bar',
		showBackground: true,
		backgroundStyle: {
			color: 'rgba(220, 220, 220, 0.8)'
		}
		}
	]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

生成图表如下：

（6）堆叠柱状图
  有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。顾名思义，堆叠柱状图就是一个系列的数值“堆叠”在另一个系列上，因而从他们的高度总和就能表达总量的变化。
  使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。

option = {
	tooltip: {},
	xAxis: {
		data: ['1月', '2月', '3月', '4月', '5月']
	},
	yAxis: {
		name:'数量'
	},
	series: [
		{
			name:'A',
			data: [10, 22, 28, 43, 49],
			type: 'bar',
			stack: 'x'
		},
		{
			name:'B',
			data: [5, 4, 3, 5, 10],
			type: 'bar',
			stack: 'x'
		}
	]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

生成图表如下：

（7）动态排序柱状图
  ①.柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
  ②.yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
  ③.yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
  ④.yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
  ⑤.如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
  ⑥.xAxis.max 建议设为 ‘dataMax’ 表示用数据的最大值作为 X 轴最大值，视觉效果更好
  ⑦.如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
  ⑧.animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
  ⑨.animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
  ⑩.以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序

生成图表如下：

var data = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
}
option = {
    xAxis: {
        max: 'dataMax'
    },
    yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 2 // only the largest 3 bars will be displayed
    },
    series: [
        {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: data,
            label: {
            show: true,
            position: 'right',
            valueAnimation: true
            }
        }
    ],
    legend: { show: true},
    animationDuration: 3000,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};

function update() {
    var data = option.series[0].data;
        for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
            } else {
            data[i] += Math.round(Math.random() * 200);
            }
        }
    myChart.setOption(option);
}

setInterval(function() {
    update();
}, 3000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2、折线图

（1）基础设置
  折线图type为line类型，其它配置感觉和柱状图区别不大；在形式上折线图更能体现趋势和关键点的值。

option = {
	tooltip: {},
	xAxis: {
		type: 'category',
		data: ['A', 'B', 'C']
	},
	yAxis: {type: 'value'},
	series: [
		{
		data: [120, 200, 150],
		type: 'line'
		}
	]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

生成图表如下：

（2）折线图的样式设置
  官网地址：https://echarts.apache.org/handbook/zh/how-to/chart-types/line/basic-line
  折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 series.lineStyle 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
	      data: [10, 22, 28, 23, 19],
	      type: 'line',	      
	      lineStyle: {
		        normal: {
		          color: 'green',
		          //折线线宽
		          width: 12,
		          //折线线条类型
		          type: 'dashed'
		        } 
	      },
	     //折线上的标点
	     label: {
	        show:true,
	        position: 'bottom',
	        textStyle: { fontSize: 20 }
	    },
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

生成图表如下：

（3）笛卡尔坐标系中的折线图

   如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 series 的 data 每个数据用一个包含两个元素的数组表示就行了。

option = {
	tooltip: {},
	xAxis: {},
	yAxis: {},
	series: [
	    {
	        data: [
	            [20, 120],
	            [50, 200],
	            [40, 50]
	        ],
	        type: 'line'
	    }
	]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

生成图表如下：

（4）堆叠折线图

option = {
tooltip: {},
xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
    {
        data: [10, 22, 28, 43, 49],
        type: 'line',
        stack: 'x',
        areaStyle: {
           // color：'',
          // opacity:,        
        },
        // 平滑曲线
        // smooth: true
    },
    {
        data: [5, 4, 3, 5, 10],
        type: 'line',
        stack: 'x',
        areaStyle: {}
    }
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3、饼图

（1）基础设置
   饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。
   饼图的半径：饼图的半径可以通过 series.radius 设置，可以是诸如 ‘60%’ 这样相对的百分比字符串，或是 200 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。

option = {
	series: [
		{
			type: 'pie',
			data: [
				    {
				        value: 335,
				        name: '直接访问'
				    },
				    {
				        value: 234,
				        name: '联盟广告'
				    },
				    {
				        value: 1548,
				        name: '搜索引擎'
				    }
			]
		}
	],
	//设置饼图的半径
	// radius: '50%'
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

生成图表如下：

（2）如果数据和为 0，不显示饼图
   在默认情况下，如果数据值和为 0，会显示平均分割的扇形。比如，如果有 4 个数据项，并且每个数据项都是 0，则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形，可以将 series.stillShowZeroSum 设为 false。

option = {
    tooltip: {},
    series: [
        {
          type: 'pie',
              // 若数据为0则不显示扇
          stillShowZeroSum: false,
          label: {
                 //默认为显示true
                 show: true
          },
                            
          data: [
                { value: 10,
                  name: '直接访问'
                },
                { value: 20,
                  name: '联盟广告'
                },
                { value: 0,
                  name: '搜索引擎'
                }
          ]          
        }
     ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

三、引用实列展示

总结：
  AxHub的图表引用适用于管理后台首页统计界面、数据列表各维度的统计、数据大屏、移动端的综合统计及分析板块的原型设计。
  运用一些框架元件，使自己的原型更加灵活生动，适用项目性也比较灵活。
  多多关注前端框架的功能、交互及实现。