diff --git a/src/api/EventDetails/index.js b/src/api/EventDetails/index.js new file mode 100644 index 0000000..ce77ca7 --- /dev/null +++ b/src/api/EventDetails/index.js @@ -0,0 +1,61 @@ +import httpService from "@/request" +// 热点事件传播导向 +export function getPropagationDirection0528(params) { + let obj = Object.assign({action: 'getPropagationDirection0528', sType: 'HotEvent0528'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 事件洞察列表 +export function getHotEventsList(params) { + let obj = Object.assign({action: 'getHotEventsList', sType: 'HotEvent'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 热点事件top车型分布 +export function getHotEventSseries(params) { + let obj = Object.assign({action: 'getHotEventSseries', sType: 'HotEvent0528'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 热点事件渠道分布 +export function getEventsSourceTypeByEventsType0528(params) { + let obj = Object.assign({action: 'getEventsSourceTypeByEventsType0528', sType: 'HotEvent0528'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 品牌数据-数据传播总量 +export function getBrandOverviewCount0528(params) { + let obj = Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} diff --git a/src/views/EventDetails/distributionOfHotEventChannels/index.vue b/src/views/EventDetails/distributionOfHotEventChannels/index.vue index a63df81..c102af1 100644 --- a/src/views/EventDetails/distributionOfHotEventChannels/index.vue +++ b/src/views/EventDetails/distributionOfHotEventChannels/index.vue @@ -16,15 +16,43 @@ + \ No newline at end of file diff --git a/src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js b/src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js index fd50e2a..c0a6a0c 100644 --- a/src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js +++ b/src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js @@ -1,117 +1,129 @@ /* * @Author: your name * @Date: 2021-10-09 11:01:19 - * @LastEditTime: 2021-10-13 14:08:29 + * @LastEditTime: 2021-10-29 15:52:04 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js */ -export default function createOpt() { - return { - grid: { - left: '3%', - right: '6%', - bottom: '3%', - top: '16%', - containLabel: true - }, - tooltip: { - trigger: "axis", - backgroundColor: "#08182F", - color: "#fff", - borderColor: "#3373CC", - textStyle: { - color: "#fff", //设置文字颜色 - }, - extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" - }, - legend: { - textStyle: { //图例文字的样式 - color: '#fff' - }, - y: 'top', - x: 23 +import * as echarts from "echarts"; +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)'] +let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].key, + type: 'bar', + stack: 'total', + barWidth: 22, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + itemStyle: { + normal: { + //柱体的颜色 + //右,下,左,上(1,0,0,0)表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors2[j] + } + ], false); + } + } + + }, + data: [arr1[j].value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + top: 46, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize:10 + }, + y: 10, + x: 10, + itemWidth: 10, + itemHeight: 10, + }, + xAxis: { + type: 'category', + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", }, - xAxis: { - type: 'category', - axisTick: { - show: false, - }, - axisLine: { - show: false, - lineStyle: { - color: "#fff", - }, - }, - data: ['奥迪A4', '奥迪A3', '奥迪A6', '奥迪A8', '奥迪Q3'] + }, + data: dx + }, + yAxis: { + type: 'value', + axisLine: { + show: false, + lineStyle: { + color: "#fff", }, - yAxis: { - type: 'value', - axisLine: { - show: false, - lineStyle: { - color: "#fff", - }, - }, - splitLine: { - lineStyle: { - type: "dashed", // y轴分割线类型 - color: "#012b4b", - }, - }, + }, + axisLabel: { + formatter: (value) => { + let str = bigNumberTransform(value); + return str; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", }, - series: [ - { - name: '产品代言', - type: 'bar', - stack: 'total', - barWidth: 24, - emphasis: { - focus: 'series' - }, - data: [320, 302, 301, 334, 390] - }, - { - name: '新车上市', - type: 'bar', - stack: 'total', - barWidth: 24, - emphasis: { - focus: 'series' - }, - data: [120, 132, 101, 134, 90] - }, - { - name: '新品发布', - type: 'bar', - stack: 'total', - barWidth: 24, - emphasis: { - focus: 'series' - }, - data: [220, 182, 191, 234, 290] - }, - { - name: '领导人', - type: 'bar', - stack: 'total', - barWidth: 24, - emphasis: { - focus: 'series' - }, - data: [150, 212, 201, 154, 190] - }, - { - name: '维权', - type: 'bar', - stack: 'total', - barWidth: 24, - emphasis: { - focus: 'series' - }, - data: [820, 832, 901, 934, 1290] - } - ] - } + }, + }, + series: data + } } \ No newline at end of file diff --git a/src/views/EventDetails/eventCorrelation/index.vue b/src/views/EventDetails/eventCorrelation/index.vue index 42348a2..3d52405 100644 --- a/src/views/EventDetails/eventCorrelation/index.vue +++ b/src/views/EventDetails/eventCorrelation/index.vue @@ -12,29 +12,59 @@ 返回品牌洞察
- 奥迪 + {{brand}}
@@ -97,4 +127,11 @@ export default { } } } +.pd-item { + display: flex; + justify-content: space-between; + color: #fff; + border-bottom: 1px solid #173b6d; + padding: 10px; +} diff --git a/src/views/EventDetails/hotEventPropagationOriented/index.vue b/src/views/EventDetails/hotEventPropagationOriented/index.vue index 48e0c69..d5c7716 100644 --- a/src/views/EventDetails/hotEventPropagationOriented/index.vue +++ b/src/views/EventDetails/hotEventPropagationOriented/index.vue @@ -17,12 +17,35 @@ diff --git a/src/views/EventDetails/index.vue b/src/views/EventDetails/index.vue index 59c5767..5bd323c 100644 --- a/src/views/EventDetails/index.vue +++ b/src/views/EventDetails/index.vue @@ -33,12 +33,20 @@ import distributionOfTOPModelsOfHotEvents from "./distributionOfTOPModelsOfHotEv import distributionOfHotEventChannels from "./distributionOfHotEventChannels" export default { name: "event-details", + data() { + return { + + } + }, components: { hotEventPropagationOriented, // 热点事件传播导向桑基图 eventCorrelation, // 中间 hotOther, // 热点事件传播导向列表 distributionOfTOPModelsOfHotEvents, // 热点事件TOP车型分布 distributionOfHotEventChannels // 热点事件渠道分布 + }, + created() { + } }