Echarts 简单实用总结

Echarts 强大的图表插件 官网：http://echarts.baidu.com/

首先使用echarts 要引入必要的js 文件
可以从官网下载 必要文件 如果只是简单实用图表 下载一个 精简 文件就可以了，正常使用 柱状图 饼图 折线图 ，也可下载源码包，包含所有图表组件的源码，常见的警告和错误提示

 <script src="echarts.min.js"></script>

下面来创建一个简单的饼图 毕竟我所用第一图就是饼图 就拿这个来说喽

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="ech1" style="width:100%;height:200px;"></div>

然后编写js代码初始化 来创建第一个饼图

var char1 = echarts.init(document.getElementById('ech1'));
var option = {
            title: {
                text: '连接池使用',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b}:{d}%"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: [
                    { name: '已使用' },
                    { name: '空闲' }
                ]
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 38, name: '已使用' },
                        { value: 62, name: '空闲' }
                    ],
                    //label: {
                    //    normal: {
                    //        position: 'outside',
                    //        formatter: '{b} {d}%'
                    //    },
                    //    emphasis: {
                    //        show: true,
                    //        textStyle: {
                    //            fontSize: '20',
                    //        }
                    //    }
                    //},
                    itemStyle: {
                        normal: {
                            label: {
                                position: 'outside',
                                formatter: '{b} {d}%'
                            },
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
};
        char1.setOption(option);

效果图如下：

原谅我图是 截出来的…….

这个饼图主题为官网的js文件默认主题 颜色可以自己设置，根据个人喜好，API提供了改变方法。

解释一下代码：
echarts.init（） 初始化创建图表的方法。
var option={} 图表的设置 配置信息 还有图表 数据都包含在内。下面分别解释一下。(个人观点哈)

        title: {//图表的标题配置
             text: '连接池使用',//标题名称
             x: 'center'//标题位于顶部位置 居中
            },
            tooltip: {//提示框的设置
                trigger: 'item',
                //'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表，还有'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                formatter: "{b}:{d}%"//此处为控制函数 具体参考API
            },

提示框效果图：


提示框跟随鼠标移动自动提示。

 legend: {//图例配置
                orient: 'vertical', //图例竖向排列
                x: 'left', //图例位置
                data: [//图例名称，此名称必须与series: []中date：name 值相同 即可形成联动效果。
                    { name: '已使用' },
                    { name: '空闲' }
                ]
            },
            series: [//数据配置
                {
                    name: '访问来源',//名字
                    type: 'pie',//类型为 饼图
                    radius: '55%'，//饼图半径
                    center: ['50%', '60%'],//饼图圆心位置
                    data: [//饼图数据 value值自行计算，和不为100也可以。
                        { value: 38, name: '已使用' },
                        { value: 62, name: '空闲' }
                    ],
                     itemStyle: {//图形样式
                        normal: {//正常状态的图形样式
                            label: {//文本注释
                                position: 'outside',
                                formatter: '{b} {d}%'
                            },
                        },
                        emphasis: {//选择状态的图形样式
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }

值得注意的是中间有一段代码被注释，
//label: {
// normal: {
// position: ‘outside’,
// formatter: ‘{b} {d}%’
// },
// emphasis: {
// show: true,
// textStyle: {
// fontSize: ‘20’,
// }
// }
//},
由于使用过程中， 引用了旧版本 也就是Echarts2.0 导致了 修改文本解释不成功，反复修改才发现 引用Echarts 3.0 时， 语法有所改变。 2.0时修改文本解释 在itemStyle: {}下 进行label 修改。
而3.0版本时 label{} 与itemStyle: {}属于同一级别 此时label 内也具有了normal与emphasis 两个状态。

第一个饼图完成。