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 两个状态。

第一个饼图完成。