绘制echart图表

开发工具与关键技术：VS、echarts图表

作者：陆桂超

撰写时间：2019年6月15日

1、 如下图所示是echarts使用的基本架构，把初始化echarts实例语句，设置配置项和显示图表方法放置在一个函数内，以便调用。

在做数据统计和调查的时候，为了更直观更容易地分析和阅读统计结果，我们往往会用到图表。那么

图表是怎么绘制出来的呢?这里要用到一个图表插件，就是Echarts图表插件。在绘制图表前首先要引用Echarts的css和js脚本文件。

1、 配置项的使用，配置项是绘制图表的主要部分。这里我以一个饼状图为例，讲解它的配置项，饼状图的主要配置项有标题组件、提示框组件、图例组件。

(1)、标题组件。设置标题的内容，位置和字体大小。

 var optionPieChartOne = {
                //标题组件
                title: {
                   text: titText,//标题内容
                   left: 'left',//位置
                   textStyle: {
                   fontSize: 12,//字体大小
                }
       }
     

 (2)、提示框组件。当鼠标遇到相对应模块时，就会弹出该模块的名称和数据。

//提示框组件
tooltip: {
trigger: ‘item’,//数据项图形触发
formatter: “{a} {b}
人数:{c},比例:{d}%”
//{a}（系列名称），{b}（数据项名称），{c}（数值）,
{d}（百分比）
}

    (3)、图例组件。设置饼状图的基本样式。        

legend:
{

orient: ‘horizontal’,//图例列表的布局朝向。'horizontal’横向   'vertical’垂直

left: ‘right’,//图例组件离容器左侧的距离 right右边

top: ‘10px’,

data: [“合格(100)”, “合格(90~99)”, “合格(80~89)”, “合格(70~79)”,

“合格(60~69)”, “不合格(0~59)”]//图例的数据数组

}