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

第一个饼图完成。