From 458e1769b46910660583ae188b67e51bf078c274 Mon Sep 17 00:00:00 2001 From: wylyl22 <2373073266@qq.com> Date: Tue, 12 Jul 2022 10:32:01 +0800 Subject: [PATCH] option --- components/chartdisplay/index.js | 102 +--------------- components/indexCom/dataChild/index.js | 4 +- components/indexCom/portraitChild/index.js | 120 ++----------------- components/indexCom/soundChild/index.js | 6 +- components/option/columnarOption.js | 92 +++++++++------ components/option/pictographicOption.js | 62 ++++++++++ components/option/pieOption.js | 54 +++++++++ components/option/sColumnarOption.js | 128 +++++++++++++++++++++ components/option/stackingLineOption.js | 115 ++---------------- 9 files changed, 330 insertions(+), 353 deletions(-) create mode 100644 components/option/pictographicOption.js create mode 100644 components/option/pieOption.js create mode 100644 components/option/sColumnarOption.js diff --git a/components/chartdisplay/index.js b/components/chartdisplay/index.js index 6d5bc39..3c6fb59 100644 --- a/components/chartdisplay/index.js +++ b/components/chartdisplay/index.js @@ -1,102 +1,12 @@ +import histogram from "../option/columnarOption" +const data=['智骏', '国机', '小虎', '华晨', '朋克美美','华晨新日','百智大熊','朋克多多','YOUNG光小新','易至EV3','雷丁芒果','风光MINIEV','宝骏KiWiEV','思皓E10X','零跑T03','科莱威CLEVER','奔奔E-Star','QQ冰激凌','小蚂蚁','宏光MINIEV',] +const data2= [600,700,800,900,1000,1200,1300,1400,1500,1600,1700,1900,2000,2100,2200,2300,2400,2500,2600,2700,] + Component({ data: { showChart: true, - brandOption: { - tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - }, - confine: true - }, - - legend: { - icon: 'rectangle',//data图标样式 - itemWidth: 10,//data图标大小 - itemHeight: 10, - textStyle: { - fontSize: 9 - }, - }, - //图表位置 - grid: { - left: 20, - right: 20, - bottom: 15, - top: 10, - containLabel: true - }, - xAxis: [ - { - type: 'value', - axisTick:{ - show:false //去除刻度线 - }, - axisLine:{ - show:false //去除轴线 - }, - axisLabel: { - color: '#999999',//y轴文本颜色 - textStyle: { - fontSize : 9 - } - }, - splitLine: { //分割线 - // lineStyle:{ - // // color:"#2d3436" - - // } - show: true, - lineStyle: { - type: 'dashed', - color: '#E8E8E8', - } - } - } - ], - yAxis: [ - { - - type: 'category', - // data: ['宏光MINIEV', '小蚂蚁', 'QQ冰激凌', '奔奔E-Star', '科莱威CLEVER','零跑T03','思皓E10X','宝骏KiWiEV','风光MINIEV','雷丁芒果','易至EV3','YOUNG光小新','朋克多多','百智大熊','华晨新日','朋克美美','华晨','小虎','国机','智骏',], - data: ['智骏', '国机', '小虎', '华晨', '朋克美美','华晨新日','百智大熊','朋克多多','YOUNG光小新','易至EV3','雷丁芒果','风光MINIEV','宝骏KiWiEV','思皓E10X','零跑T03','科莱威CLEVER','奔奔E-Star','QQ冰激凌','小蚂蚁','宏光MINIEV',], - axisTick:{ - show:false //去除刻度线 - }, - axisLine:{ - show:false, //去除轴线 - }, - axisLabel: { - color: '#999999',//x轴文本颜色 - textStyle: { - fontSize : 9 - } - - } - } - ], - series: [ - { - type: 'bar', - barWidth : 12, - stack:"Search Engine", - data: [600,700,800,900,1000,1200,1300,1400,1500,1600,1700,1900,2000,2100,2200,2300,2400,2500,2600,2700,], - // data: [2700, 2600,2500,2400,2300,2200,2100,2000,1900,1700,1600,1500,1400,1300,1200,1000,900,800,700,600], - emphasis: {//折线图的高亮状态。 - focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 - }, - itemStyle: { - normal:{ - color: '#0084FF', - // lineStyle: { - // color: '#FF4852' - // } - } - } - }, - - ] - }, + brandOption: histogram(data,data2,'#0084FF',false) + , }, onShow() { diff --git a/components/indexCom/dataChild/index.js b/components/indexCom/dataChild/index.js index 1521a90..8a0dd7b 100644 --- a/components/indexCom/dataChild/index.js +++ b/components/indexCom/dataChild/index.js @@ -10,7 +10,7 @@ const dValue=[ [1400, 2000, 1500, 1800, 1490, 900, 310], [25, 167, 564, 256, 1009, 2000, 140]] const dColor=['#FF4852','#FF6E25','#FFBF00','#20CC62','#00D6D6','#00AAFF','#7257FF'] - const data=['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] + const dx=['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] Component({ data: { @@ -23,7 +23,7 @@ Component({ timelist: ['二十四小时', '最近七天', '最近三十天', '自定义'], totallist: [], showChart: true, - dataOption: brokenLine(dName,dValue,dColor,data) + dataOption: brokenLine(dName,dValue,dColor,dx) }, lifetimes: { diff --git a/components/indexCom/portraitChild/index.js b/components/indexCom/portraitChild/index.js index 141938a..72d920e 100644 --- a/components/indexCom/portraitChild/index.js +++ b/components/indexCom/portraitChild/index.js @@ -1,9 +1,13 @@ -var dataList=[ +import pieOption from '../../option/pieOption' +import pictographicOption from '../../option/pictographicOption' +const color=['#0084FF','#20CC62','#FFBF00'] +const dataList=[ { value: 1650245, name: "女性",color:'#0084FF'}, { value: 1650245, name: "未知" ,color:'#20CC62'}, { value: 3307418, name: "男性" ,color:'#FFBF00'}, ] - +const dRegion=['四川', '广东', '浙江', '北京','江西',] +const dValue=[30, 40, 66, 10,30] Component({ data: { dataList:dataList, @@ -48,116 +52,8 @@ Component({ // }, // ], showChart: true, - sexOption: { - tooltip: { - trigger: 'item' - }, - // 注释字体样式 - // legend: { - // orient: 'vertical', - // top:16, - // left:170, - // itemWidth: 10,//data图标大小 - // itemHeight: 10, - // itemGap: 50//图标之间间距 - - // }, - // 环形统计图样式 - series: [ - { - // bottom:68, - // right:6, - name: 'Access From', - type: 'pie', - radius: ['66', '40'], - avoidLabelOverlap: false, - - itemStyle: { - // borderRadius: 10, - borderColor: '#fff', - borderWidth: 2 - }, - // 点击弹出提示位置 - label: { - show: false, - position: 'center' - }, - color:['#0084FF','#20CC62','#FFBF00'], - //点击弹出提示样式 - // emphasis: { - // label: { - // show: true, - // fontSize: '40', - // fontWeight: 'bold' - // } - // }, - labelLine: { - show: false - }, - // 环形数据 - data: dataList - } - ] - }, - regionOption:{ - tooltip: { - }, - xAxis: { - show:false, - type:'value' - }, - yAxis: - { - data: ['四川', '广东', '浙江', '北京','江西',], - inverse: true, - axisTick: { show: false }, - axisLine: { show: false }, - axisLabel: { - margin: 10, - color: '#333333', - fontSize: 12 - } - }, - grid: { - // top: 'center', - bottom:20, - height:186, - width:48, - left: 40, - }, - series: [ - { - itemStyle:{ - normal:{ - color:'#0084FF', - barBorderRadius:12 - }, - }, - // current data - type: 'bar', - barWidth:10, - data:[30, 40, 66, 10,30], - label: { - show: true, - formatter: function (params) { - return ((params.value / 100) * 100).toFixed(1) + ' %'; - }, - // position: 'right', - // offset: [20, 0], - color: '#333333', - fontSize: 12, - position:[60,-4] - }, - showBackground: true, - backgroundStyle: { - color: 'rgba(180, 180, 180, 0.2)' - }, - markLine: { - symbol: 'none', - }, - }, - ] -}, + sexOption: pieOption(color,dataList), + regionOption:pictographicOption(dRegion,dValue), }, onShow() { this.getTabBar().init(); diff --git a/components/indexCom/soundChild/index.js b/components/indexCom/soundChild/index.js index fea0236..d174b3b 100644 --- a/components/indexCom/soundChild/index.js +++ b/components/indexCom/soundChild/index.js @@ -1,4 +1,4 @@ -import histogram from "../../option/columnarOption" +import sHistogram from "../../option/sColumnarOption" const dx=['长安','大众','丰田','吉利','哈佛'] const ds=[ [1400, 2400, 1000, 2800, 1000, 400, 1200], @@ -14,8 +14,8 @@ const color2=['#FF4852','#FF6E25','#FFBF00','#20CC62','#00D6D6','#00AAFF','#7257 Component({ data: { showChart: true, - brandOption:histogram(dx,ds,data,color2,false), - // modelOption: histogram(data1,data2,data3,data4,false) + brandOption:sHistogram(dx,ds,data,color2), + modelOption: sHistogram(dx,ds,data,color2) }, onShow() { diff --git a/components/option/columnarOption.js b/components/option/columnarOption.js index cb515af..32f4db2 100644 --- a/components/option/columnarOption.js +++ b/components/option/columnarOption.js @@ -1,5 +1,6 @@ -export default function histogram(dx=[],ds=[],data=[],color1='',color2=[],MS=true) { - // MS判断多条数据还是单条数据 true为单条false为多条 +// 柱状 +export default function histogram(dx=[],ds=[],data=[],color1='', direction=true) { + // direction true为垂直 fales为水平 return { tooltip: { trigger: 'axis', @@ -9,12 +10,12 @@ export default function histogram(dx=[],ds=[],data=[],color1='',color2=[],MS=tru confine: true }, legend: { - x:MS?'15':'0', + x:'15', icon: 'rectangle',//data图标样式 - itemWidth: MS?'10':"8",//data图标大小 - itemHeight: MS?'10':"8", + itemWidth: '10',//data图标大小 + itemHeight: '10', textStyle: { - fontSize: MS?'9':"8" + fontSize: '9' }, data: data, }, @@ -22,11 +23,11 @@ export default function histogram(dx=[],ds=[],data=[],color1='',color2=[],MS=tru grid: { left: 20, right: 20, - bottom: MS?10:15, - top: MS?20:40, + bottom: 10, + top: 20, containLabel: true }, - yAxis: [ + yAxis:direction?[ { type: 'value', axisTick:{ @@ -51,10 +52,28 @@ export default function histogram(dx=[],ds=[],data=[],color1='',color2=[],MS=tru type: 'dashed', color: '#E8E8E8', } + } + } + ]:[ + { + type: 'category', + data: dx, + axisTick:{ + show:false //去除刻度线 + }, + axisLine:{ + show:false, //去除轴线 + }, + axisLabel: { + color: '#999999',//x轴文本颜色 + textStyle: { + fontSize : 9 + } + } } ], - xAxis: [ + xAxis: direction?[ { type: 'category', data: dx, @@ -70,19 +89,45 @@ export default function histogram(dx=[],ds=[],data=[],color1='',color2=[],MS=tru fontSize : 9 } + } + } + ]:[ + { + type: 'value', + axisTick:{ + show:false //去除刻度线 + }, + axisLine:{ + show:false //去除轴线 + }, + axisLabel: { + color: '#999999',//y轴文本颜色 + textStyle: { + fontSize : 9 + } + }, + splitLine: { //分割线 + // lineStyle:{ + // // color:"#2d3436" + + // } + show: true, + lineStyle: { + type: 'dashed', + color: '#E8E8E8', + } } } ], - series:columar(data,ds,color1,color2,MS) + series:columar(data,ds,color1) } } -function columar(data=[],ds=[],color1='',color2=[],MS){ +function columar(data=[],ds=[],color1=''){ // MS判断多条数据还是单条数据 true为单条false为多条 let list=[] - for (let i = 0; i < MS?1:color2.length; i++) { - MS? + for (let i = 0; i < 1; i++) { list.push({ type: 'bar', data: ds, @@ -98,24 +143,7 @@ function columar(data=[],ds=[],color1='',color2=[],MS){ } } } - }) : list.push({ - name: data[i], - type: 'bar', - barWidth : 24, - data: ds[i], - stack:"Search Engine", - emphasis: {//折线图的高亮状态。 - focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 - }, - itemStyle: { - normal:{ - color: color2[i], - lineStyle: { - color: color2[i] - } - } - } - }) + }) } return list } diff --git a/components/option/pictographicOption.js b/components/option/pictographicOption.js new file mode 100644 index 0000000..5fc013e --- /dev/null +++ b/components/option/pictographicOption.js @@ -0,0 +1,62 @@ +// 象形 +export default function pictographicOption(dRegion=[],dValue=[]){ + return { + tooltip: { + }, + xAxis: { + show:false, + type:'value' + }, + yAxis: + { + data: dRegion, + inverse: true, + axisTick: { show: false }, + axisLine: { show: false }, + axisLabel: { + margin: 10, + color: '#333333', + fontSize: 12 + } + }, + grid: { + // top: 'center', + bottom:20, + height:186, + width:48, + left: 40, + }, + series: [ + { + itemStyle:{ + normal:{ + color:'#0084FF', + barBorderRadius:12 + }, + }, + // current data + type: 'bar', + barWidth:10, + data:dValue, + label: { + show: true, + formatter: function (params) { + return ((params.value / 100) * 100).toFixed(1) + ' %'; + }, + // position: 'right', + // offset: [20, 0], + color: '#333333', + fontSize: 12, + position:[60,-4] + }, + showBackground: true, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)' + }, + markLine: { + symbol: 'none', + }, + }, + ] +} +} \ No newline at end of file diff --git a/components/option/pieOption.js b/components/option/pieOption.js new file mode 100644 index 0000000..db4f561 --- /dev/null +++ b/components/option/pieOption.js @@ -0,0 +1,54 @@ +// 饼图 +export default function pieOption(color=[],data=[]){ + return{ + tooltip: { + trigger: 'item' + }, + // 注释字体样式 + // legend: { + // orient: 'vertical', + // top:16, + // left:170, + // itemWidth: 10,//data图标大小 + // itemHeight: 10, + // itemGap: 50//图标之间间距 + // }, + // 环形统计图样式 + series: [ + { + // bottom:68, + // right:6, + name: 'Access From', + type: 'pie', + radius: ['66', '40'], + avoidLabelOverlap: false, + + itemStyle: { + // borderRadius: 10, + borderColor: '#fff', + borderWidth: 2 + }, + // 点击弹出提示位置 + label: { + show: false, + position: 'center' + }, + color:color, + //点击弹出提示样式 + // emphasis: { + // label: { + // show: true, + // fontSize: '40', + // fontWeight: 'bold' + // } + // }, + labelLine: { + show: false + }, + // 环形数据 + data: data + } + ] + + } +} \ No newline at end of file diff --git a/components/option/sColumnarOption.js b/components/option/sColumnarOption.js new file mode 100644 index 0000000..ec207ed --- /dev/null +++ b/components/option/sColumnarOption.js @@ -0,0 +1,128 @@ +// 柱状 +export default function sHistogram(dx=[],ds=[],data=[],color2=[]) { + // MS判断多条数据还是单条数据 true为单条false为多条 + return { + tooltip: { + trigger: 'axis', + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' + }, + confine: true + }, + legend: { + icon: 'rectangle',//data图标样式 + itemWidth: 8,//data图标大小 + itemHeight: 8, + left: 5, + textStyle: { + fontSize: 8, + fontWeight: 400 + }, + data: data, + }, + //图表位置 + grid: { + left: 20, + right: 20, + bottom: 15, + top: 40, + containLabel: true + }, + yAxis: [ + { + type: 'value', + axisTick:{ + show:false //去除刻度线 + }, + axisLine:{ + show:false //去除轴线 + }, + axisLabel: { + color: '#999999',//y轴文本颜色 + textStyle: { + fontSize : 9 + } + }, + splitLine: { //分割线 + // lineStyle:{ + // // color:"#2d3436" + + // } + show: true, + lineStyle: { + type: 'dashed', + color: '#E8E8E8', + } + } + } + ], + xAxis: [ + { + type: 'category', + data: dx, + axisTick:{ + show:false //去除刻度线 + }, + axisLine:{ + show:false, //去除轴线 + }, + axisLabel: { + color: '#999999',//x轴文本颜色 + textStyle: { + fontSize : 9 + } + + } + } + ], + series:columar(data,ds,color2) + } + +} + +function columar(data=[],ds=[],color2=[]){ +// MS判断多条数据还是单条数据 true为单条false为多条 + let list=[] + for (let i = 0; i < color2.length; i++) { + // MS? + // list.push({ + // type: 'bar', + // data: ds, + // stack:"Search Engine", + // emphasis: {//折线图的高亮状态。 + // focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 + // }, + // itemStyle: { + // normal:{ + // color: color1, + // lineStyle: { + // color: color1 + // } + // } + // } + // }) : + list.push({ + name: data[i], + type: 'bar', + barWidth : 24, + data: ds[i], + stack:"Search Engine", + emphasis: {//折线图的高亮状态。 + focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。 + }, + itemStyle: { + normal:{ + color: color2[i], + lineStyle: { + color: color2[i] + } + } + } + }) + } + return list +} + + + + diff --git a/components/option/stackingLineOption.js b/components/option/stackingLineOption.js index c3815dd..e54ac7d 100644 --- a/components/option/stackingLineOption.js +++ b/components/option/stackingLineOption.js @@ -1,4 +1,5 @@ -export default function brokenLine(dName=[],dValue=[],dColor=[],data=[]){ +// 折线 +export default function brokenLine(dName=[],dValue=[] ,dColor=[],dx=[]){ return{ tooltip: { trigger: 'axis', @@ -59,7 +60,7 @@ export default function brokenLine(dName=[],dValue=[],dColor=[],data=[]){ { type: 'category', // data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], - data:data, + data:dx, axisTick:{ show:false //去除刻度线 }, @@ -77,114 +78,14 @@ export default function brokenLine(dName=[],dValue=[],dColor=[],data=[]){ ], series:Multiple(dName,dValue,dColor) } - - // [ - // { - // name: '微博', - // type: 'line', - // symbol:'none', //去圆点 - // data: [1400, 2000, 1500, 1800, 1490, 900, 310], - // itemStyle: { - // normal:{ - // color: '#FF4852', - // lineStyle: { - // color: '#FF4852' - // } - // } - // } - // }, - // { - // name: '其他', - // type: 'line', - // symbol:'none', //去圆点 - // data: [1520, 1052, 141, 174, 1690, 250, 220], - // itemStyle: { - // normal:{ - // color: '#FF6E25', - // lineStyle: { - // color: '#FF6E25' - // } - // } - // } - // }, - // { - // name: '短视频', - // type: 'line', - // symbol:'none', //去圆点 - // data: [210, 322, 551, 364, 960, 1307, 10], - // itemStyle: { - // normal:{ - // color: '#FFBF00', - // lineStyle: { - // color: '#FFBF00' - // } - // } - // } - - // }, - // { - // name: '微信', - // type: 'line', - // symbol:'none', //去圆点 - // data: [250, 362, 71, 374, 970, 130, 170], - // itemStyle: { - // normal:{ - // color: '#20CC62', - // lineStyle: { - // color: '#20CC62' - // } - // } - // } - // }, - // { - // name: 'APP', - // type: 'line', - // symbol:'none', //去圆点 - // data: [20, 32, 41, 354, 90, 130, 10], - // itemStyle: { - // normal:{ - // color: '#00D6D6', - // lineStyle: { - // color: '#00D6D6' - // } - // } - // } - // }, - // { - // name: '论坛', - // type: 'line', - // symbol:'none', //去圆点 - // data: [200, 382, 661, 34, 909, 1308, 150], - // itemStyle: { - // normal:{ - // color: '#00AAFF', - // lineStyle: { - // color: '#00AAFF' - // } - // } - // } - // }, - // { - // name: '新闻', - // type: 'line', - // symbol:'none', //去圆点 - // data: [250, 326, 178, 349, 900, 1300, 140], - // itemStyle: { - // normal:{ - // color: '#7257FF', - // lineStyle: { - // color: '#7257FF' - // } - // } - // } - // } - // ] } - function Multiple(dName=[],dValue=[],dColor=[]) { + function Multiple(dName=[],dValue=[], dColor=[]) { + // MS true为单fales为双 let list=[] for (let i = 0; i < dName.length; i++) { // const element = array[index]; + list.push({ name: dName[i], type: 'line', @@ -198,9 +99,7 @@ export default function brokenLine(dName=[],dValue=[],dColor=[],data=[]){ } } } - - }) - + }) } return list; }