|
@@ -0,0 +1,808 @@
|
|
|
+import EC from 'echarts'
|
|
|
+import eWordcloud from 'echarts-wordcloud'
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+const color = ["#00FFF0","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8cb25","#3dffb0","#e8a425","#ff7aab","#e84b1e","#552ce2","#ffae21","#e8861e","#d441ff","#35e8e4","#9c7aff","#e86fd8","#ffee38"];
|
|
|
+
|
|
|
+/*
|
|
|
+ * 获取 自浮云 - 常用1
|
|
|
+ * id: 元素ID
|
|
|
+ * data: [{
|
|
|
+ name: "发动机卡了", // 值
|
|
|
+ value: 100, // 权重
|
|
|
+ textStyle: {
|
|
|
+ emphasis: {
|
|
|
+ color: 'red' // 光标移入颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ name: "发动了", // 值
|
|
|
+ value: 20, // 权重
|
|
|
+ textStyle: {
|
|
|
+ emphasis: {
|
|
|
+ color: 'red' // 光标移入颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ * name: 提示框name
|
|
|
+ * */
|
|
|
+export function getWordCloud(id, data) {
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {},
|
|
|
+ series: [{
|
|
|
+ type: 'wordCloud',
|
|
|
+ gridSize: 2,
|
|
|
+ sizeRange: [12, 50],
|
|
|
+ rotationRange: [-90, 90],
|
|
|
+ shape: 'pentagon',
|
|
|
+ width: 600,
|
|
|
+ height: 400,
|
|
|
+ drawOutOfBound: true,
|
|
|
+ textStyle: {
|
|
|
+ normal: {
|
|
|
+ color: function() {
|
|
|
+ return 'rgb(' + [
|
|
|
+ Math.round(Math.random() * 160),
|
|
|
+ Math.round(Math.random() * 160),
|
|
|
+ Math.round(Math.random() * 160)
|
|
|
+ ].join(',') + ')';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * 获取 雷达图 - 常用1
|
|
|
+ * id: 元素ID
|
|
|
+ * horn: [
|
|
|
+ { name: '销售', max: 6500},
|
|
|
+ { name: '管理', max: 16000},
|
|
|
+ { name: '信息技术', max: 30000},
|
|
|
+ { name: '客服', max: 38000},
|
|
|
+ { name: '研发', max: 52000}
|
|
|
+ ]
|
|
|
+ * data: [
|
|
|
+ {
|
|
|
+ value: [4300, 10000, 28000, 35000, 50000],
|
|
|
+ name: '完好率'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ * name: 提示框name
|
|
|
+ * */
|
|
|
+export function getRadar(id, horn, data, name) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "雷达数据";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {},
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ radius: "60%",
|
|
|
+ indicator: horn,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#FFF"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#2aafb7"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: name,
|
|
|
+ type: 'radar',
|
|
|
+ // areaStyle: {normal: {}},
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * 获取 雷达图 - 常用2 - 百分比
|
|
|
+ * id: 元素ID
|
|
|
+ * horn: [
|
|
|
+ { name: '销售', max: 100},
|
|
|
+ { name: '管理', max: 100},
|
|
|
+ { name: '信息技术', max: 100},
|
|
|
+ { name: '客服', max: 100},
|
|
|
+ { name: '研发', max: 100}
|
|
|
+ ]
|
|
|
+ * data: [
|
|
|
+ {
|
|
|
+ value: [98, 98, 98, 98, 98],
|
|
|
+ name: '完好率'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ * name: 提示框name
|
|
|
+ * */
|
|
|
+export function getRadar2(id, horn, data, name) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "雷达数据";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ // formatter: '{b0}<br />{a}: {c0}'
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ let value = params.data.name;
|
|
|
+ horn.forEach((item, i)=>{
|
|
|
+ value += '<br />'+item.name+':'+params.data.value[i]+"%"
|
|
|
+ });
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ radius: "60%",
|
|
|
+ indicator: horn,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#FFF"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#2aafb7"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: name,
|
|
|
+ type: 'radar',
|
|
|
+ // areaStyle: {normal: {}},
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * 获取 柱状图 - 横向1
|
|
|
+ * id: 元素ID
|
|
|
+ * x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
|
|
|
+ * data: [{
|
|
|
+ value: 1000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#AAFAE0",
|
|
|
+ barBorderRadius: [0, 3, 3, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 2000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FCCDBA",
|
|
|
+ barBorderRadius: [0, 3, 3, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 3000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#015EEA",
|
|
|
+ barBorderRadius: [0, 3, 3, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ * name: 提示框name
|
|
|
+ * */
|
|
|
+export function getBarHorizontal(id, x, data, name, tipX) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "数量";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ // formatter: '{b0}<br />{a}: {c0}'
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ if(tipX === undefined){
|
|
|
+ return params.name+'<br />'+params.seriesName+': '+params.data.value;
|
|
|
+ }else{
|
|
|
+ return tipX[tipX.length - 1 - params.dataIndex]+'<br />'+params.seriesName+': '+params.data.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 10,
|
|
|
+ left: 60,
|
|
|
+ right: 40,
|
|
|
+ bottom: 30,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ minInterval: 1, // 刻度不出现小数
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: name,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/*
|
|
|
+ * 获取 柱状图 - 纵向1
|
|
|
+ * id: 元素ID
|
|
|
+ * x: ['TOP3', 'TOP2', 'TOP1']
|
|
|
+ * data: [{
|
|
|
+ value: 1000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#AAFAE0",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 2000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FCCDBA",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 3000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#015EEA",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ * name: 提示框name
|
|
|
+ * */
|
|
|
+export function getBarVertical(id, x, data, name) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "数量";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 15,
|
|
|
+ left: 60,
|
|
|
+ right: 40,
|
|
|
+ bottom: 30,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ minInterval: 1, // 刻度不出现小数
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ // 改变纵坐标的单位,过大的时候处理成万
|
|
|
+ formatter: function (value, index) {
|
|
|
+ if(value >= 10000){
|
|
|
+ return (value/10000).toFixed(0)+"万";
|
|
|
+ }else{
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: name,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/*
|
|
|
+ * 获取 柱状图 - 纵向2 - 一轴多线
|
|
|
+ * id: 元素ID
|
|
|
+ * x: ['分中心1', '分中心2', '分中心3', '分中心4']
|
|
|
+ *
|
|
|
+ * data: [
|
|
|
+ {
|
|
|
+ name: '土建',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4AB2EC",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [7.0, 23.2, 25.6, 76.7]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机电',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#F8CA9D",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [2.6, 5.9, 9.0, 26.4]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#8E6398",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [28.7, 70.7, 175.6, 182.2]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ * */
|
|
|
+export function getBarVertical2(id, x, data) {
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 15,
|
|
|
+ left: 60,
|
|
|
+ right: 40,
|
|
|
+ bottom: 30,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ // 改变纵坐标的单位,过大的时候处理成万
|
|
|
+ formatter: function (value, index) {
|
|
|
+ if(value >= 10000){
|
|
|
+ return (value/10000).toFixed(0)+"万";
|
|
|
+ }else{
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: data
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/*
|
|
|
+ * 获取 柱状图 - 纵向2_1 - 一轴多线百分比
|
|
|
+ * id: 元素ID
|
|
|
+ * x: ['分中心1', '分中心2', '分中心3', '分中心4']
|
|
|
+ *
|
|
|
+ * data: [
|
|
|
+ {
|
|
|
+ name: '土建',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#4AB2EC",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [7.0, 23.2, 25.6, 76.7]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机电',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#F8CA9D",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [2.6, 5.9, 9.0, 26.4]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#8E6398",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ },
|
|
|
+ data: [28.7, 70.7, 175.6, 182.2]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ * */
|
|
|
+export function getBarVertical2_1(id, x, data) {
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 15,
|
|
|
+ left: 60,
|
|
|
+ right: 40,
|
|
|
+ bottom: 30,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ max: 100,
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ minInterval: 1, // 刻度不出现小数
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: data
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/*
|
|
|
+ * 获取 柱状图 - 纵向3
|
|
|
+ * id: 元素ID
|
|
|
+ * x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
|
|
|
+ * data: [{
|
|
|
+ value: 1000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 2000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 3000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 4000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 5000,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ value: 5999,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#D8A0FE",
|
|
|
+ barBorderRadius: [3, 3, 0, 0] // 柱子圆角
|
|
|
+ }
|
|
|
+ },]
|
|
|
+ * */
|
|
|
+export function getBarVertical3(id, x, data, name) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "数量";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 25,
|
|
|
+ left: 80,
|
|
|
+ right: 40,
|
|
|
+ bottom: 30,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ minInterval: 1, // 刻度不出现小数
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF",
|
|
|
+ // 改变纵坐标的单位,过大的时候处理成万
|
|
|
+ formatter: function (value, index) {
|
|
|
+ if(value >= 10000){
|
|
|
+ return (value/10000).toFixed(0)+"万";
|
|
|
+ }else{
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#011A3F"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#FFF"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: name,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 6,
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * 获取 饼图 - 常用1
|
|
|
+ * id: 元素ID
|
|
|
+ * data: 饼图数据
|
|
|
+ * name: 提示框name
|
|
|
+ * [
|
|
|
+ {value: 335, name: '直接访问'},
|
|
|
+ {value: 310, name: '邮件营销'},
|
|
|
+ {value: 234, name: '联盟广告'},
|
|
|
+ {value: 135, name: '视频广告'},
|
|
|
+ {value: 1548, name: '搜索引擎'}
|
|
|
+ ]
|
|
|
+ * */
|
|
|
+export function getPie(id, data, name) {
|
|
|
+ if(name === undefined){
|
|
|
+ name = "占比";
|
|
|
+ }
|
|
|
+ if(data === undefined){
|
|
|
+ message.error("没有找到报表数据,请检查!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 44,
|
|
|
+ right: 25,
|
|
|
+ top: 56,
|
|
|
+ bottom: 40
|
|
|
+ },
|
|
|
+ color: color,
|
|
|
+ series: [{
|
|
|
+ name: name,
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['45%', '65%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: data,
|
|
|
+ labelLine: {
|
|
|
+ length: 10,
|
|
|
+ length2: 10,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#FFF"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ },
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ textStyle: {
|
|
|
+ color:'#FFF',
|
|
|
+ fontSize: 14,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ formatter: ['{b}','{d}%'].join('\n')
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ getWordCloud,
|
|
|
+
|
|
|
+ getRadar,
|
|
|
+ getRadar2,
|
|
|
+
|
|
|
+ getBarHorizontal,
|
|
|
+ getBarVertical,
|
|
|
+ getBarVertical2,
|
|
|
+ getBarVertical2_1,
|
|
|
+ getBarVertical3,
|
|
|
+
|
|
|
+ getPie,
|
|
|
+
|
|
|
+ color,
|
|
|
+}
|