|
Ecarts一共分为5大模块
(1)、在html文件中，引入echartsjs库文件。
ECharts 的引入方式像 JavaScript 库文件、样，使用s#标签引入即可，如代码 2-1所示,此处需要注意 echartsjs 库文件的存放路如果找不到存放路径那么将无法显示图表。代码2-1中最下面两行代码通过CDN方式引)库文件，这种引入方式的好处是不需下载echartsjs库文件，但需实时连接网络。
引入 ECharts 库文件
scnipt type="text/javascript" src="./js/echarts js">
 (2）、准备div容器。
EChans 图形是基于 DOM 进行绘制的，所以在绘制图形前要先绘制一个 DOM 容器 div 来承载图形，添加 div 容器后，需要设置它的基本属性:宽(weigh)与高①cigh)。这两个属性决定了所绘制图表的大小。绘制一个 div 容器并设置容器的样式，容器可以设置的属性并不仅限于宽与高，还可以设置其他属性，如定位等。
(3)、使用init()方法初始化容器。
通过步骤(1)引入echarts.js库文件后，会自动创建个全局变量 echarts,全局变量 echarts 有若千方法。基于准备好的 DOM,通过 echarts.imnitO方法可以初始化 ECharts 实例。
// 基于准备好的DOM，初始化ECharts图表
var myChart =echarts.init(document.getElementById("main"))
(4)、设置图形配置项和数据。
option 的设置是 ECharts 中的重点和难点，option 的配置项参数等的设置决定了绘制什么样的图形。在下面的示例里将会对 option 的配置项参数进行详细说明，下面的示例里会通过配置 option 项绘制简单的条形图，柱状图，瀑布图，饼图，环形图的五种示例。
// 基于准备好的DOM，初始化ECharts图表
var myChart =echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
}
(5)、使用指定的配置项和数据,显示渲染图表。
在绘制 ECharts 图表的过程中,setOptior是执行绘制动作的方法,为初始化的 myChart 设置 option 进行图表绘制。
// 基于准备好的DOM，初始化ECharts图表
var myChart =echarts.init(document.getElementById("main"))
// 指定图表的配置项和数据
var option = {
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
示例一、条形图
Document
var datay=['自愿','微信推广','节日活动','团购推销'] //入会方式
var dataxn=[2,0,2,1] //男生的入会方式人数
var dataxv=[3,2,2,2] //女生的入会方式人数
var mychat =echarts.init(document.getElementById("main")) //使用了init（）方法初始化容器
option = {
title:{ //设置标题
text:'入会渠道', //主标题
},
legend:{ //设置图例的组件
data:['男','女']
},
xAxis: { //x轴坐标系
type: 'value'
},
yAxis: { //y轴坐标系
type: 'category',
data: datay
},
tooltip: { //浮窗效果
trigger: 'axis',
axisPointer: { // 设置坐标轴指示器，坐标轴触发有效
type: 'shadow' // 设置坐标轴默认为直线，可选为:'line'|'shadow'
}
},
toolbox:{ //工具箱
show: true,
feature:{
magicType:{
type:['line','bar','stack','tiled'],
title:{ //设置标题
line:'切换折线图',
bar:'切换柱状图',
stack:'切换堆积图',
},
},
saveAsImage: {
show: true,
title:'保存'
}
}
},
series: [ //系类类表
{
name:'男',
data: dataxn,
type: 'bar', //柱状图
itemStyle:{
color:'#4590e3' //设置颜色样式
}
},
{
name:'女',
data: dataxv,
type: 'bar', //柱状图
itemStyle:{
color:'#00ff9c' //设置颜色样式
}
}
]
}
// 使用刚指定的配置项和数据显示图表
mychat.setOption(option)
效果展示
示例二、堆积柱状图柱状图
var mychat =echarts.init(document.getElementById("main")) //使用了init（）方法初始化容器
var datax=['20岁~29岁','30岁~39岁','40岁~49岁']
var datayn=[4,0,1] //男生的人数
var datayv=[6,3,0] //女生的人数
option = {
title:{ //设置标题
text:'会员年龄', //主标题
},
legend:{ //设置图例的组件
data:['男','女']
},
xAxis: {
type: 'category',
data: datax
},
yAxis: { //y轴坐标系
type: 'value'
},
tooltip: { //浮窗效果
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
toolbox:{ //工具箱
show: true,
feature:{
magicType:{
type:['line','tiled'],
title:{ //设置标题
line:'切换折线图',
},
},
saveAsImage: {
show: true,
title:'保存'
}
}
},
series: [ //系类类表
{
name:'男',
data: datayn,
type: 'bar', //柱状图
stack:'年龄',
itemStyle:{
color:'#4590e3' //设置颜色样式
}
},
{
name:'女',
data: datayv,
stack:'年龄',
type: 'bar', //柱状图
itemStyle:{
color:'#00ff9c' //设置颜色样式
}
}
]
}
// 使用刚指定的配置项和数据显示图表
mychat.setOption(option)
效果展示
示例三、瀑布图
Document
var mychat =echarts.init(document.getElementById("main")) //使用了init（）方法初始化容器
var datax=['广州','佛山','深圳','东莞']
var datay=[3076,2275,1181,546]
option={
title:{
text:'城市',
subtext:'消费总金额'
},
legnd:{
data:['消费']
},
toolbox: { //工具箱栏
show: true,
feature: {
mark: {
show: true
},
dataView: { //工具栏里的显示数据图标
show: true,
readOnly: false,
title:'显示数据'
},
restore: { //工具栏里的刷新图标
show: true,
title:'刷新'
},
saveAsImage: { //工具栏里的保存图标
show: true,
title:'保存'
}
}
},
tooltip: { //浮窗效果
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) { //显示堆叠的数据,数据格式
var tar = params[0];
return tar.name + '' + tar.seriesName + ' : ' + tar.value;
}
},
xAxis:{ //x坐标轴
type:'category',
data:datax
},
yAxis:{ //y坐标轴
type:'value'
},
series:[ //系类类表图表类型
{
name:'辅助',
data: datay,
type: 'bar',
stack: '总消费', //堆叠效果
itemStyle: {
borderColor: 'transparent', //透明色
color: 'transparent'
},
data:[0,801,1094,635],
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'bule'
}
}
},
{
name:'消费',
data: datay,
type: 'bar',
stack: '总消费', //堆叠效果
label: {
show: true,
position: 'inside'
},
data:datay
}
]
}
// 使用刚指定的配置项和数据显示图表
mychat.setOption(option)
效果展示
示例四、饼图
// 基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: { // 配置标题组件
text: '会员入会渠道分布情况', // 设置主标题
subtext: '', // 设置次标题
left: 'center' // 设置主次标题都左右居中
},
tooltip: { // 配置提示框组件
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: { // 配置图例组件
orient: 'vertical', // 设置垂直排列
left: 62, // 设置图例左边距
top: 22, // 设置图例顶边距
data: ['自愿', '微信推广', '团购促销', '节日活动']
},
toolbox: { // 配置工具箱组件
show: true, // 设置工具箱组件是否显示
left: 444, // 设置工具箱左边距
top: 28, // 设置工具箱顶边距
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [ // 配置数据系列组件
{
name: '入会方式',
type: 'pie',
radius: '66%', // 设置半径
center: ['58%', '55%'], // 设置圆心
clockWise: true,
data: [ // 设置数据的具体值
{
value: 5,
name: '自愿'
},
{
value: 2,
name: '微信推广'
},
{
value: 3,
name: '团购促销'
},
{
value: 4,
name: '节日活动'
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
效果展示
示例五、环形图
环形图效果其实只需要在饼图效果series里面r添加adius效果即可
// 基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: { // 配置标题组件
text: '会员入会渠道分布情况', // 设置主标题
subtext: '', // 设置次标题
left: 'center' // 设置主次标题都左右居中
},
tooltip: { // 配置提示框组件
trigger: 'item',
formatter: "{a} {b} : {c} ({d}%)"
},
legend: { // 配置图例组件
orient: 'vertical', // 设置垂直排列
left: 62, // 设置图例左边距
top: 22, // 设置图例顶边距
data: ['自愿', '微信推广', '团购促销', '节日活动']
},
toolbox: { // 配置工具箱组件
show: true, // 设置工具箱组件是否显示
left: 444, // 设置工具箱左边距
top: 28, // 设置工具箱顶边距
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [ // 配置数据系列组件
{
name: '入会方式',
type: 'pie',
radius: '66%', // 设置半径
radius: ['20%', '60%'], //添加饼图空心效果,圆环形状
center: ['58%', '55%'], // 设置圆心
clockWise: true,
data: [ // 设置数据的具体值
{
value: 5,
name: '自愿'
},
{
value: 2,
name: '微信推广'
},
{
value: 3,
name: '团购促销'
},
{
value: 4,
name: '节日活动'
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
效果展示
|