/* 折线
*@data: Array y轴折线名称
*@selected: Object {'次日留存率':true,'3日留存率':true,'7日留存率':false} 某条折现是否显示
*@xAxis: Array x轴数据 xAxis: ["05/18", "05/19", "05/20", "05/21", "05/22", "05/23"]
*@series:Array n条折线数据 series: [{name: 7日留存, data: ["0.00", "0.00", "0.00", "0.00", "0.00", "0.00"]},…]
*/
import echarts from "echarts";
import { lineTip,lineTip1,lenlineTip,prelineTip, pie,lineTip_map,lineTip_map2 } from '../api/api';
function lineCharts(data, selected, xAxis, series) {
let arr = []
for (var k in series) {
arr[k] = {
name: series[k]['name'],
type: 'line',
data: series[k]['data'],
smooth: true,
smoothMonotone: 'x',
areaStyle: {
normal: {
color: {
type: 'dotted',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(84,127,229,0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(84,127,229,0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
}
};
}
let rate = {
type: 'value',
name: '跳出率',
min: 0,
max: 100,
position: 'right',
show: false,
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}%'
},
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
}
let edraw = {
color: ['rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(167,140,222,1)', 'rgba(38,198,217,1)', 'rgba(238,110,115,1)', 'rgba(254,178,116,1)', '#0BCEFF'], // 线条颜色
title: {
text: ' '
},
tooltip: { //提示框
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip(param);
},
},
legend: { // 图例
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
itemGap: 68,
// bottom: 30,
top: '20',
data: data, // 图例在这里显示
selected: selected
},
grid: { // 直角坐标系配置
height: '250px',
left: '50px',
right: '50px',
top: '90px',
// bottom: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: xAxis,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter:function(params){
if(params != null){
// console.log(params)
// console.log(params.indexOf('与'))
if(params.indexOf('~')==-1){
return params
}else {
var newParamsName = "";// 最终拼接成的字符串
// console.log(params)
var paramsarr=params.split('')
// console.log(paramsarr)
var arr1=[]
var arr2=['\n']
var arr4=['~']
var arr3=[]
paramsarr.map((item,index)=>{
if(item=='~'){
arr1=paramsarr.slice(0,index)
// console.log(arr1)
arr3=paramsarr.slice(index+1)
// console.log(arr3)
}
})
// console.log(arr1)
// console.log(arr3)
for(var i=0;i<arr1.length;i++) {
if(arr1[i]==' '){
arr1.splice(i,1)
console.log(i)
}
}
for(var i=0;i<arr3.length;i++) {
if(arr3[i]==' '){
arr3.splice(i,1)
}
}
// console.log(arr1)
var endarr=[...arr1,...arr2,...arr4,...arr2,...arr3]
return endarr.join('')
}
}
console.log(params);
return params
}
}
}],
yAxis: [
{
type: 'value',
minInterval: 1,
name: '',
position: 'left',
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}'
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
},
rate
],
series: arr
}
// console.log(edraw.yAxis)
edraw.series.map(item => {
// console.log(item.name)
if (item.name == '跳出率') {
item.yAxisIndex = 1
}
})
for (let k in selected) {
if (k == '跳出率') {
if (selected[k]) {
for (var i = 0; i < edraw['yAxis'].length; i++) {
if (edraw['yAxis'][i]['name'] === '跳出率') {
edraw['yAxis'][i]['show'] = true
}
}
} else {
for (var i = 0; i < edraw['yAxis'].length; i++) {
if (edraw['yAxis'][i]['name'] === '跳出率') {
edraw['yAxis'][i]['show'] = false
}
}
}
}
}
// console.log(edraw)
return edraw
}
// 平台比较小的折线
function smallLineCharts(data, selected, xAxis, series) {
let arr = []
for (var k in series) {
arr[k] = {
name: series[k]['name'],
type: 'line',
data: series[k]['data'],
smooth: true,
smoothMonotone: 'x',
areaStyle: {
normal: {
color: {
type: 'dotted',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(84,127,229,0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(84,127,229,0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
}
};
}
let rate = {
type: 'value',
name: '跳出率',
min: 0,
max: 100,
position: 'right',
show: false,
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}%'
},
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
}
let edraw = {
color: ['rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(167,140,222,1)', 'rgba(38,198,217,1)', 'rgba(238,110,115,1)', 'rgba(254,178,116,1)', '#0BCEFF'], // 线条颜色
title: {
text: ' '
},
tooltip: { //提示框
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lenlineTip(param);
},
},
legend: { // 图例
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
itemGap: 15,
padding:10,
top: '20',
data: data, // 图例在这里显示
selected: selected,
formatter: function(name){
return name.length>8?name.substr(0,8)+"...":name;
}
},
grid: { // 直角坐标系配置
height: '250px',
left: '50px',
right: '0px',
top: '90px',
// bottom: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: xAxis,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
}
}
}],
yAxis: [
{
type: 'value',
minInterval: 1,
name: '',
position: 'left',
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}'
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
},
rate
],
series: arr
}
// console.log(edraw.yAxis)
edraw.series.map(item => {
// console.log(item.name)
if (item.name == '跳出率') {
item.yAxisIndex = 1
}
})
for (let k in selected) {
if (k == '跳出率') {
if (selected[k]) {
for (var i = 0; i < edraw['yAxis'].length; i++) {
if (edraw['yAxis'][i]['name'] === '跳出率') {
edraw['yAxis'][i]['show'] = true
}
}
} else {
for (var i = 0; i < edraw['yAxis'].length; i++) {
if (edraw['yAxis'][i]['name'] === '跳出率') {
edraw['yAxis'][i]['show'] = false
}
}
}
}
}
// console.log(edraw)
return edraw
}
// y轴为百分号折线
function percentageLineCharts(data, selected, xAxis, series) {
let arr = []
for (var k in series) {
arr[k] = {
name: series[k]['name'],
type: 'line',
data: series[k]['data'],
smooth: true,
smoothMonotone: 'x',
areaStyle: {
normal: {
color: {
type: 'dotted',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(84,127,229,0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(84,127,229,0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
}
};
}
let edraw = {
color: ['rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(167,140,222,1)', 'rgba(38,198,217,1)', 'rgba(238,110,115,1)', 'rgba(254,178,116,1)', '#0BCEFF'], // 线条颜色
title: {
text: ' '
},
tooltip: { //提示框
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip1(param);
},
},
legend: { // 图例
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
itemGap: 15,
padding:10,
top: '20',
data: data, // 图例在这里显示
selected: selected
},
grid: { // 直角坐标系配置
height: '250px',
left: '50px',
right: '0px',
top: '90px',
// bottom: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: xAxis,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
}
}
}],
yAxis: [
{
type: 'value',
minInterval: 1,
name: '',
position: 'left',
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}%'
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
}
],
series: arr
}
return edraw
}
/* 柱状图的
*@xAxis: Array x轴数据 xAxis: ["05/18", "05/19", "05/20", "05/21", "05/22", "05/23"]
*@series:Array n条折线数据 series: [{name: 7日留存, data: ["0.00", "0.00", "0.00", "0.00", "0.00", "0.00"]},…]
*@percent: boolean 是否开启顶部显示
*@lenght: boolean 是否显示显示长度
*/
function barCharts(xAxis, series, percent, lenght = true) {
let arr = []
for (var k in series) {
arr[k] = {
name: series[k]['name'],
barWidth: 30,
type: 'bar',
data: series[k]['data'],
itemStyle: {
normal: {
label: {
show: percent, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#316EFF',
fontSize: 14
},
formatter: function (value) {
if (percent) {
return `${value.data}`
} else {
return value.data
}
}
}
}
}
};
}
let edraw = {
color: ['#316EFF'],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.5)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line',
lineStyle: {
color: 'rgba(128, 128, 128, 0.2)',
width: 50
}
},
formatter: function (param) {
return prelineTip(param);
},
},
grid: {
height: '310px',
left: '3%',
right: '4%',
bottom: '30px',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxis,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
interval: 0,
formatter: function (value) {
if (lenght) {
value = value.toString();
var maxlength = 7;
if (value.length > maxlength) {
return value.substring(0, maxlength - 1) + '...';
} else {
return value;
}
} else {
return value;
}
}
}
}],
yAxis: [{
type: 'value',
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}'
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
}],
series: arr
}
// console.log(edraw)
return edraw
}
// y轴柱状图的
function antiBarCharts(xAxis, series, percent,selected) {
let arr = []
for (var k in series) {
arr[k] = {
name: series[k]['name'],
barWidth: 30,
type: 'bar',
data: series[k]['data'],
itemStyle: {
normal: {
label: {
show: percent, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#316EFF',
fontSize: 14
},
formatter: function (value) {
if (percent) {
return `${value.data}`
} else {
return value.data
}
}
}
}
}
};
}
let edraw = {
color: ['#316EFF'],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.5)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line',
lineStyle: {
color: 'rgba(128, 128, 128, 0.2)',
width: 50
}
},
formatter: function (param) {
return lineTip(param);
},
},
grid: {
// height: '310px',
left: '3%',
right: '4%',
top: '20px',
bottom: '10px',
containLabel: true
},
yAxis: [{
type: 'category',
data: xAxis,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
interval: 0
}
}],
xAxis: [{
type: 'value',
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
},
formatter: '{value}'
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#eae9e9'
}
}
}],
series: arr
}
// console.log(edraw)
return edraw
}
// 3柱
/*
legendData:['分享人数', '分享次数', '分享回流'],
selected:{
'分享人数': true,
'分享次数': true,
'分享回流': true,
'分享回流比': false,
'分享新增': false
}
*/
function threeBar (xAxis,series,legendData,selected){
var arr = [];
for (var k in series) {
arr[k] = {
name: series[k]['name'],
type: 'bar',
barWidth: '10%',
data: series[k]['data'],
smooth: true,
smoothMonotone: 'x',
areaStyle: {
normal: {
color: {
type: 'dotted',
x: 0,
y: 0,
x2: 0,
y2: 1,
globalCoord: false // 缺省为 false
},
}
},
};
// 单个柱子颜色右上到下颜色渐变处理
/*
if (k == 0) {
arr[k].areaStyle = {
normal: {
color: 'red',
shadowColor: 'rgba(84,127,229, 0.1)',
shadowBlur: 10
}
},
arr[k].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(84,127,229, 1)'
},
{
offset: 1,
color: 'rgba(84,127,229, 0.3)'
}
]),
borderWidth: 1,
borderColor: 'rgba(84,127,229,0.5)'
}
}
}
if (k == 1) {
arr[k].areaStyle = {
normal: {
color: 'red',
shadowColor: 'rgba(84,127,229, 0.1)',
shadowBlur: 10
}
},
arr[k].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(54,195,155, 1)'
},
{
offset: 1,
color: 'rgba(54,195,155, 0.3)'
}
]),
borderWidth: 1,
borderColor: 'rgba(54,195,155,0.5)'
}
}
}
if (k == 2) {
arr[k].areaStyle = {
normal: {
color: 'red',
shadowColor: 'rgba(84,127,229, 0.1)',
shadowBlur: 10
}
},
arr[k].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(167,140,222, 1)'
},
{
offset: 1,
color: 'rgba(167,140,222, 0.3)'
}
]),
borderWidth: 1,
borderColor: 'rgba(167,140,222,0.5)'
}
}
}
if (k == 3) {
arr[k].areaStyle = {
normal: {
color: 'red',
shadowColor: 'rgba(84,127,229, 0.1)',
shadowBlur: 10
}
},
arr[k].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(167,140,222, 1)'
},
{
offset: 1,
color: 'rgba(167,140,222, 0.3)'
}
]),
borderWidth: 1,
borderColor: 'rgba(167,140,222,0.5)'
}
}
}
*/
}
return {
color:[' #316EFF','#00CCFF','#9355DE'],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(84,127,229,1)'
}, {
offset: 1,
color: 'rgba(84,127,229, 0.3)'
}]),
borderWidth: 1,
borderColor: 'rgba(84,127,229,0.5)'
}
},
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'
}
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip(param);
},
},
legend: {
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
data: legendData,
y: 'bottom',
selected: selected,
bottom: 0,
itemGap: 68,
top: '265px'
},
grid: {
height: '210px',
left: '50px',
right: '50px',
top: '40px',
containLabel: true
},
xAxis: {
type: 'category',
data: xAxis,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
}
}
},
yAxis: [{
type: 'value',
minInterval: 1,
max: null,
min: null,
axisTick: {
length: 10
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#333'
}
},
splitLine: { // 坐标轴在 grid 区域中的分隔线。
lineStyle: {
type: '',
color: '#ccc'
}
},
}],
series: arr
}
}
/*扇形饼图
*@data: series中的data数据
*@legend:图例数据
*@name: boolean 标题
*/
function pieCharts(data, legend,name) {
//计算data中value的总和
var a = 0;
for (var i = 0; i < data.length; i++) {
a = a + parseFloat(data[i].value)
}
//添加新的元素到data中，并设置其颜色样式为白色
data.push({ value: a, name: '__other', itemStyle: { normal: { color: 'rgba(0,0,0,0)' } } });
// console.log(data)
let arr=[]
data.map(item=>{
if(item.name!='__other'){
arr.push(parseFloat(item.value))
}
})
// 传一个数组计算百分比（解决js精度问题）
function per_arry(arry) {
var lenders_age_arry=arry;
var lenders_tol=0;
var gt_zero=0 ;//判断几个值大于0
var res_arry=[]; //最终结果
var last_gt_index=0; //存放最后一个大于0的值所在的索引
var befor_num_sum=0; //除最后一个，将之前大于0的百分值相加
$(lenders_age_arry).each(function (index,value) {
if( value>0 ){
gt_zero++;
last_gt_index=index;
lenders_tol=lenders_tol+parseFloat(value);
}
});
if(gt_zero==0){ //全值都是0
res_arry=[0];
}
if(gt_zero==1){ //只有一个值时
res_arry=[100];
}
if(gt_zero>1){
$(lenders_age_arry).each(function (index,value) {
if( value>0 ){
if(last_gt_index==index){
res_arry.push( (Math.round((100-befor_num_sum)*100))/100 ) ;
}else{
res_arry.push( Math.round(parseFloat((value/lenders_tol)*10000))/100 ) ;
befor_num_sum=befor_num_sum+ (Math.round(parseFloat((value/lenders_tol)*10000))/100);
}
}else{
res_arry.push(0) ;
}
});
}
return res_arry;
}
let percentage=per_arry(arr)
// console.log(percentage)
let aobj={}
percentage.map((item,index)=>{
data[index].per=item
})
// console.log(data)
let option = {
color: ['rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(167,140,222,1)', 'rgba(38,198,217,1)', 'rgba(238,110,115,1)', 'rgba(254,178,116,1)'],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
if (param.name != '__other') {
return pie(param)
} else {
return
}
},
confine:true
},
legend: {
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
orient: 'vertical',
top: 25,
data: legend,
},
grid: {
height: '210px',
// top: '-10%',
// left: '-20%',
// right: '7%',
containLabel: true
},
series: [
{
name: name,
type: 'pie',
startAngle: 180,
radius: ['62%', '90%'],
center: ['50%', '92%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: false,
},
emphasis: {
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
}
]
}
return option
}
// 全饼图
function roundPie (data,name,legend=[],normalShow=true){
return {
// color: ['rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(167,140,222,1)', 'rgba(38,198,217,1)', 'rgba(238,11,115,1)', 'rgba(254,178,116,1)'],
color: ['#5582FF', '#00CCFF', 'rgba(167,140,222,1)', 'rgba(84,127,229,1)', 'rgba(54,195,155,1)', 'rgba(254,178,116,1)'],
noDataLoadingOption: {
text: '暂无数据',
effect: 'bubble',
effectOption: {
effect: {
n: 0
}
}
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip_map(param)
}
},
axisLabel: {
color: '#999'
},
legend: {
icon: 'pin',
itemWidth: 14,
itemHeight: 5,
orient: 'horizontal',
top: 10,
data: legend,
},
grid: {
height: '230px',
left: '50px',
right: '100px',
top: '30px',
containLabel: true
},
series: [
{
name: name,
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: normalShow,
textStyle: {
color: '#999'
}
},
emphasis: {}
},
labelLine: {
normal: {
show: normalShow,
lineStyle: {
color: '#f1f1f1'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
},
// 边框的设置
{
radius: ['45%', '50%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
itemStyle: {
color: "rgb(146,175,255)",
},
}],
}
]
}
}
/*省地图
*@data: series中的data数据 省份数据[ {name: "上海", value: "10"},{name: "云南", value: "1"}]
*@title: hover时候的提示框标题
*/
function provinceCharts(data,title){
let Max = 0 // Max: 最大值
if(data.length!=0){
Max = data.sort((a, b) => {
return a.value - b.value
})[data.length - 1].value;
}
return {
title: {
left: 'center'
},
tooltip: {
trigger: 'item',
backgroundColor: '#f1f1f1',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip_map(param);
},
},
visualMap: {
min: 0,
max: Max,
itemWidth: 15,
itemHeight: 70,
left: 'left',
bottom: '20px',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
color: ['rgba(84,127,229,1)', 'rgba(84,127,229,8)', 'rgba(84,127,229,6)', 'rgba(84,127,229,.4)', 'rgba(84,127,229,.2)'],
inRange: {
color: ['#8dacf5', '#547fe5']
}
},
grid: {
right: 100
},
toolbox: {
show: false, //控制是否显示右侧小图标
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
series: [
{
name:title ,//hover时候的提示框标题
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "#f1f1f1"
}
},
areaStyle: {color: 'rgba(84,127,229,0.5)'},
color: '#547fe5',
borderColor: '#fff',
},
emphasis: {//鼠标hover样式
label: {
show: false,
textStyle: {
color: '#fa4f04'
}
}
}
},
label: {
normal: {
show: false //是否显示地域名称
},
emphasis: {
}
},
data: data
},]
}
}
/*市地图
*@data: series中的data数据 省份数据[ {name: "北京", value: "13"},{name: "北京", value: "13"}]
*@title: hover时候的提示框标题
*/
function cityCharts(data,title){
let Max = 0 // Max: 最大值
if(data.length!=0){
Max = data.sort((a, b) => {
return a.value - b.value
})[data.length - 1].value;
}
// 城市地理坐标
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青岛': [120.33, 36.07],
'乳山': [121.52, 36.89],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'莱西': [120.53, 36.86],
'日照': [119.46, 35.42],
'胶南': [119.97, 35.88],
'南通': [121.05, 32.08],
'拉萨': [91.11, 29.97],
'云浮': [112.02, 22.93],
'梅州': [116.1, 24.55],
'文登': [122.05, 37.2],
'上海': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],
'厦门': [118.1, 24.46],
'汕尾': [115.375279, 22.786211],
'潮州': [116.63, 23.68],
'丹东': [124.37, 40.13],
'太仓': [121.1, 31.45],
'曲靖': [103.79, 25.51],
'烟台': [121.39, 37.52],
'福州': [119.3, 26.08],
'瓦房店': [121.979603, 39.627114],
'即墨': [120.45, 36.38],
'抚顺': [123.97, 41.97],
'玉溪': [102.52, 24.35],
'张家口': [114.87, 40.82],
'阳泉': [113.57, 37.85],
'莱州': [119.942327, 37.177017],
'湖州': [120.1, 30.86],
'汕头': [116.69, 23.39],
'昆山': [120.95, 31.39],
'宁波': [121.56, 29.86],
'湛江': [110.359377, 21.270708],
'揭阳': [116.35, 23.55],
'荣成': [122.41, 37.16],
'连云港': [119.16, 34.59],
'葫芦岛': [120.836932, 40.711052],
'常熟': [120.74, 31.64],
'东莞': [113.75, 23.04],
'河源': [114.68, 23.73],
'淮安': [119.15, 33.5],
'泰州': [119.9, 32.49],
'南宁': [108.33, 22.84],
'营口': [122.18, 40.65],
'惠州': [114.4, 23.09],
'江阴': [120.26, 31.91],
'蓬莱': [120.75, 37.8],
'韶关': [113.62, 24.84],
'嘉峪关': [98.289152, 39.77313],
'广州': [113.23, 23.16],
'延安': [109.47, 36.6],
'太原': [112.53, 37.87],
'清远': [113.01, 23.7],
'中山': [113.38, 22.52],
'昆明': [102.73, 25.04],
'寿光': [118.73, 36.86],
'盘锦': [122.070714, 41.119997],
'长治': [113.08, 36.18],
'深圳': [114.07, 22.62],
'珠海': [113.52, 22.3],
'宿迁': [118.3, 33.96],
'咸阳': [108.72, 34.36],
'铜川': [109.11, 35.09],
'平度': [119.97, 36.77],
'佛山': [113.11, 23.05],
'海口': [110.35, 20.02],
'江门': [113.06, 22.61],
'章丘': [117.53, 36.72],
'肇庆': [112.44, 23.05],
'大连': [121.62, 38.92],
'临汾': [111.5, 36.08],
'吴江': [120.63, 31.16],
'石嘴山': [106.39, 39.04],
'沈阳': [123.38, 41.8],
'苏州': [120.62, 31.32],
'茂名': [110.88, 21.68],
'嘉兴': [120.76, 30.77],
'长春': [125.35, 43.88],
'胶州': [120.03336, 36.264622],
'银川': [106.27, 38.47],
'张家港': [120.555821, 31.875428],
'三门峡': [111.19, 34.76],
'锦州': [121.15, 41.13],
'南昌': [115.89, 28.68],
'柳州': [109.4, 24.33],
'三亚': [109.511909, 18.252847],
'自贡': [104.778442, 29.33903],
'吉林': [126.57, 43.87],
'阳江': [111.95, 21.85],
'泸州': [105.39, 28.91],
'西宁': [101.74, 36.56],
'宜宾': [104.56, 29.77],
'呼和浩特': [111.65, 40.82],
'成都': [104.06, 30.67],
'大同': [113.3, 40.12],
'镇江': [119.44, 32.2],
'桂林': [110.28, 25.29],
'张家界': [110.479191, 29.117096],
'宜兴': [119.82, 31.36],
'北海': [109.12, 21.49],
'西安': [108.95, 34.27],
'金坛': [119.56, 31.74],
'东营': [118.49, 37.46],
'牡丹江': [129.58, 44.6],
'遵义': [106.9, 27.7],
'绍兴': [120.58, 30.01],
'扬州': [119.42, 32.39],
'常州': [119.95, 31.79],
'潍坊': [119.1, 36.62],
'重庆': [106.54, 29.59],
'台州': [121.420757, 28.656386],
'南京': [118.78, 32.04],
'滨州': [118.03, 37.36],
'贵阳': [106.71, 26.57],
'无锡': [120.29, 31.59],
'本溪': [123.73, 41.3],
'克拉玛依': [84.77, 45.59],
'渭南': [109.5, 34.52],
'马鞍山': [118.48, 31.56],
'宝鸡': [107.15, 34.38],
'焦作': [113.21, 35.24],
'句容': [119.16, 31.95],
'北京': [116.46, 39.92],
'徐州': [117.2, 34.26],
'衡水': [115.72, 37.72],
'包头': [110, 40.58],
'绵阳': [104.73, 31.48],
'乌鲁木齐': [87.68, 43.77],
'枣庄': [117.57, 34.86],
'杭州': [120.19, 30.26],
'淄博': [118.05, 36.78],
'鞍山': [122.85, 41.12],
'溧阳': [119.48, 31.43],
'库尔勒': [86.06, 41.68],
'安阳': [114.35, 36.1],
'开封': [114.35, 34.79],
'济南': [117, 36.65],
'德阳': [104.37, 31.13],
'温州': [120.65, 28.01],
'九江': [115.97, 29.71],
'邯郸': [114.47, 36.6],
'临安': [119.72, 30.23],
'兰州': [103.73, 36.03],
'沧州': [116.83, 38.33],
'临沂': [118.35, 35.05],
'南充': [106.110698, 30.837793],
'天津': [117.2, 39.13],
'富阳': [119.95, 30.07],
'泰安': [117.13, 36.18],
'诸暨': [120.23, 29.71],
'郑州': [113.65, 34.76],
'哈尔滨': [126.63, 45.75],
'聊城': [115.97, 36.45],
'芜湖': [118.38, 31.33],
'唐山': [118.02, 39.63],
'平顶山': [113.29, 33.75],
'邢台': [114.48, 37.05],
'德州': [116.29, 37.45],
'济宁': [116.59, 35.38],
'荆州': [112.239741, 30.335165],
'宜昌': [111.3, 30.7],
'义乌': [120.06, 29.32],
'丽水': [119.92, 28.45],
'洛阳': [112.44, 34.7],
'秦皇岛': [119.57, 39.95],
'株洲': [113.16, 27.83],
'石家庄': [114.48, 38.03],
'莱芜': [117.67, 36.19],
'常德': [111.69, 29.05],
'保定': [115.48, 38.85],
'湘潭': [112.91, 27.87],
'金华': [119.64, 29.12],
'岳阳': [113.09, 29.37],
'长沙': [113, 28.21],
'衢州': [118.88, 28.97],
'廊坊': [116.7, 39.53],
'菏泽': [115.480656, 35.23375],
'合肥': [117.27, 31.86],
'武汉': [114.31, 30.52],
'大庆': [125.03, 46.58]
};
/* 对数据进行处理
[{name: "北京",value:[116.46, 39.92, "13"]}]
*/
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
return {
title: {
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
backgroundColor: '#f1f1f1',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip_map(param);
},
},
visualMap: {
min: 0,
max: Max,
itemWidth: 15,
itemHeight: 70,
color: ['rgba(84,127,229,1)', 'rgba(84,127,229,8)', 'rgba(84,127,229,6)', 'rgba(84,127,229,.4)', 'rgba(84,127,229,.2)'],
inRange: {
color: ['#8dacf5', '#547fe5']
},
left: 'left',
bottom: '20px',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaStyle: {color: 'rgba(84,127,229,0.5)'},
borderColor: '#fff',
},
emphasis: {
areaColor: '#fddc58'
}
}
},
series: [
{
name: title,
type: 'scatter', // 散点
coordinateSystem: 'geo',
data: convertData(data),
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip_map2(param)
}
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false,
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#547fe5'
}
}
},
{
name: title,
type: 'effectScatter', // 带涟漪特效动画散点
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)), // 排序前 6
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.7)',
padding: 0,
extraCssText: 'box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);',
formatter: function (param) {
return lineTip_map2(param)
}
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color: "#999",// 文字颜色
}
},
itemStyle: {
normal: {
color: '#547fe5',
shadowBlur: 5,
shadowColor: '#333'
}
},
zlevel: 1
}
]
}
}
export {
lineCharts,
smallLineCharts,
percentageLineCharts,
barCharts,
antiBarCharts,
pieCharts,
provinceCharts,
cityCharts,
roundPie,
threeBar
}
function pie(ag) {
// var c = (ag['value']/a)*100;
// c = c.toFixed(2);
console.log(ag)
var div = '<div class="barTip" style="position:relative;z-index:99;top:0px;left:0px;">';
div += '<h5>' + ag.seriesName + '</h5>';
div += '<p>' + ag.marker + ag.name + " " + '<b style="position:absolute; right: 10px">' + ag.data.per + '%' + '</b>' + '</p>';
div += '</div>'
return div;
}
.barTip{
text-align: left;
width:382px !important;
color: #333 !important;
padding: 0 !important;
border: 1px solid #e7e7e7 !important;
border-radius: 3px !important;
font-weight: 400 !important;
z-index: 10000;
}
.barTip h5{
color: #333 !important;
background: rgba(123, 123, 123, 0.1) !important;
margin-top: 0 !important;
line-height: 32px !important;
font-size: 12px !important;
padding-left: 11px !important;
margin-bottom: 0 !important;
background: raba(255, 255, 255, .8) !important;
font-family: '"Microsoft YaHei" !important';
}
.barTip p{
margin: 10px;
width: 300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.barTip b{
font-weight: normal;
}
.barTip p span{
width: 6px !important;
height: 6px !important;
border-radius: 6px !important;
margin-bottom: 2px;
}
1694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
