javascript echarts 用HTML5中的画布（Canvas）在“圳品”信息系统网页上绘制显示饼图

继续编写“圳品”信息系统，除了要列出圳品清单，还需要做进一步的数据分析，比如按“圳品”所在区域进行统计和展示，这个之前已经实现（参见：在网页地图图片上加注企业和“圳品”数量信息），现在还需要对“圳品” 按类别进行统计和展示。为了让数据对比一目了然，我们打算用饼图来展示。

要在网页上绘制显示饼状图，有很多现成的库，比如 Echarts等，但我们想用HTML5中的画布（Canvas）来自己画，这个在网上有很多的演示代码，拿来根据我们的需要进行修改。

我们首先定义一个“圳品”类别数组aType，如下：

const aType = [

"水果",//0

"粮食",//1,谷类、豆类、薯类

"食用油",//2

"饮用水",//3

"畜类",//4

"禽类",//5

"渔类",//6

"其它"//7

];

包括水果、粮食、食用油、饮用水、畜、禽、渔、其它 8类。

再将“圳品”类别统计结果保存到数组aTypeCount ，如下：

//结构：类别，数量，颜色

var aTypeCount = [

[0, 3, "purple"],

[1, 5, "gray"],

[2,3, 'yellow'],

[3,4,"green"],

[4,8,"red"]

];

接下来我们定义Pie对象，并提供init、render、和drawText三个方法，分别实现数据初始化、渲染页面（画饼图）和输出文字说明。

然后把数组aTypeCount 的数据传递给Pie对象来绘制饼图。

完整的代码如下：

“圳品”信息系统

debug：

显示效果截图如下：

金钥匙