echarts学习
1. 引入echarts
2. 页面定义两个区域用于放置图表
3. 选择器并初始化echarts
//选择器
var dom = document.getElementById("container");
//初始化echarts
var myChart = echarts.init(dom);
4.定义数据
/* 使用假数据 */
var s_old=[{'name':'A','value':'1','area':'12.34','typename':'1电梯2楼4户'}
,{'name':'B','value':'2','area':'19.21','typename':'0电梯2楼4户'}
,{'name':'C','value':'3','area':'10.34','typename':'2电梯4楼8户'}];
/* 结束 */
var data=[];//横轴
var value=[];//套数数量 value
var area=[];// 面积 area
for (var x=0;x
5. 设置option
var option;
option= {
title: {
text: '梯户统计',
left: 'center'
},
tooltip: {//用于自定义悬浮内容
trigger: 'axis',//item表示分开展示，axis集中展示
formatter:(params,ticket,callback)=>{
}
},
legend: {//图例，X轴方向上的位置以及在Y轴方向上的位置
data: ['套数', '面积'],
x:'center',
y:'bottom',
},
grid: {//配置项：图表离容器的距离
show: true,
top:50, //图表离容器顶部的距离
},
xAxis: [//x轴设置
{
type: 'category',//'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
data: data,
axisPointer: {//用于在直角坐标系的 x 坐标轴上设置坐标轴指示器。
type: 'shadow'//'line' 直线指示器,'shadow' 阴影指示器
},
axisLabel: {//单轴刻度标签的相关设置
//x轴文字的配置
show: true,//是否显示单轴的刻度标签。
interval: 0,//使x轴文字显示全,单轴刻度标签的显示间隔，在类目轴中有效。
}
}
],
//坐标轴，包含数量和面积，需要两个纵坐标，是一个数组
yAxis: [
{
type: 'value',//'value' ：数值轴，适用于连续数据。'category' ：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' ：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' ：对数轴。适用于对数数据。
name: '',
interval: 5,
axisLabel: {
formatter: '{value}'
},
min: (value) => {
return 0
},
max: (value) => {
return value.max
}
},
{
type: 'value',
name: '',
interval: 5,
axisLabel: {
formatter: '{value}'
},
min: (value) => {
return 0
},
max: (value) => {
return value.max
}
}
],
//利用series设置不同指标的样式，一个柱状，一个现状.series系列至少包括一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数
series: [
{
name: '套数',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: value
},
{
name: '面积',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: area
}
]
};
if (option && typeof option === 'object') {//判断option是否为空并且是否是一个对象
myChart.setOption(option);
window.onresize = myChart.resize;
}
6. 添加自定义悬浮内容
tooltip: {
trigger: 'axis',
formatter:(params,ticket,callback)=>{
var htmlStr = "";
var nameT="";
console.log(params);
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name; //x轴的名称
var seriesName = param.seriesName; //图例名称
var value = param.value; //y轴值
var color = param.color; //图例颜色
// console.log('param',param)
//判断横轴名字
for(var x=0;x'+seriesName+':'+value+'';
}
return ''+nameT+'
'+htmlStr;
},
7. 饼图添加自定义悬浮内容
var dom1 = document.getElementById("container1");
var myChart1 = echarts.init(dom1);
var app1 = {};
var option1;
option1 = {
title: {
text: '占比',
// subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
// formatter: '{a}
{b} : {c} ({d}%)'
formatter:function(params){
var htmlStr = "";
var nameT="";
console.log(params);
var xName=params.name;
var value=params.value;
var color=params.color;
var percent=params.percent;
//判断横轴名字
for(var x=0;x'+xName+'-'+nameT+':'+percent+'%'+'';
htmlStr +=''+nameT+':'+percent+'%'+'';
return '户型占比'+"
"+htmlStr;
}
},
legend: {
// orient: 'vertical',
// left: 'left'
show:false,
},
grid: {
top:10,
},
series: [
{
name: '户型占比',
type: 'pie',
radius: '50%',
data: s_old,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
if (option1 && typeof option1 === 'object') {
myChart1.setOption(option1);
}else{
layer.msg(s_old.msg);
}
注意事项
1. 图表不显示时，检查一下div的style中宽度和高度是否设置正确，当没有父盒子的时候，不能使用百分比
