| | |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | const leaderChartDomRef = ref(null); |
| | | const leaderBarChartDomRef = ref(null); |
| | | const App = createApp({ |
| | | setup() { |
| | | let state = reactive({ |
| | |
| | | const initLeaderBoardChart = () => { |
| | | var chartDom = document.getElementById('leaderChart'); |
| | | var leaderChartDom = echarts.init(chartDom); |
| | | leaderChartDomRef.value = leaderChartDom; |
| | | var option = { |
| | | title: { |
| | | text: '近12月缴费金额', |
| | |
| | | const barXData = state.leaderBoardList.map((item) => item.Name); |
| | | var chartDom = document.getElementById('leaderBarChart'); |
| | | var leaderBarChartDom = echarts.init(chartDom); |
| | | leaderBarChartDomRef.value = leaderBarChartDom; |
| | | var option = { |
| | | xAxis: { |
| | | type: 'category', |
| | |
| | | option && leaderBarChartDom.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.parent.addEventListener('resize', () => { |
| | | leaderChartDomRef.value.resize(); |
| | | leaderBarChartDomRef.value.resize(); |
| | | }); |
| | | initLeaderBoardChart(); |
| | | initLeaderBoardBarChart(); |
| | | }); |
| | |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | |
| | | const monthlyPayChart = ref(null) |
| | | const monthPayRecord = ref(null) |
| | | const monthPayAmount = ref(null) |
| | | createApp({ |
| | | setup() { |
| | | const initMonthlyPayEChart = () => { |
| | | const chartDom = document.getElementById('MonthlyPayChart'); |
| | | const myChart = echarts.init(chartDom); |
| | | monthlyPayChart.value = myChart |
| | | const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }]; |
| | | //下面是一个简单的demo,方便展示数据格式和构成 |
| | | let option = { |
| | |
| | | const initMonthPayRecordEChart = () => { |
| | | const chartDom = document.getElementById('MonthPayRecord'); |
| | | const myMonthPayChart = echarts.init(chartDom); |
| | | monthPayRecord.value = myMonthPayChart |
| | | var monthPayOption = { |
| | | title: { |
| | | text: '近12个月的缴费记录', |
| | |
| | | const initMonthPayAmountEChart = () => { |
| | | const chartDom = document.getElementById('MonthPayAmount'); |
| | | const myMonthPayAmountChart = echarts.init(chartDom); |
| | | monthPayAmount.value = myMonthPayAmountChart |
| | | var monthPayAmountOption = { |
| | | title: { |
| | | text: '近12个月的缴费金额', |
| | |
| | | myMonthPayAmountChart && myMonthPayAmountChart.resize(); |
| | | } |
| | | onMounted(() => { |
| | | window.parent.addEventListener('resize', () => { |
| | | monthlyPayChart.value && monthlyPayChart.value.resize(); |
| | | monthPayRecord.value && monthPayRecord.value.resize(); |
| | | monthPayAmount.value && monthPayAmount.value.resize(); |
| | | }) |
| | | initMonthlyPayEChart(); |
| | | initMonthPayRecordEChart() |
| | | initMonthPayAmountEChart() |
| | |
| | | <script src="/ai_html/views/demo/js/index.full.js"></script> |
| | | <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script> |
| | | <script src="/ai_html/views/demo/js/echarts.min.js"></script> |
| | | <!-- <script src="/ai_html/lib/common.js"></script> --> |
| | | <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" /> |
| | | <style> |
| | | .el-dialog__header { |
| | | margin-right: 0; |
| | | padding: 8px 10px; |
| | | background: #528abe |
| | | } |
| | | |
| | | .el-dialog__title { |
| | | color: #fff; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-dialog__close { |
| | | color: #fff !important; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | |
| | | <div class="top-center-data"> |
| | | <div class="data-item" v-for="(item, index) in state.dataList"> |
| | | <p class="data-item-title">{{item.title}}</p> |
| | | <p class="data-item-desc">{{item.value}}</p> |
| | | <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p> |
| | | </div> |
| | | </div> |
| | | <div class="top-center-chart"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%" |
| | | class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible"> |
| | | <div id="businessTrends" class="w-full h-[500px]"></div> |
| | | </el-dialog> |
| | | </div> |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | const { createApp, onMounted, ref, reactive, nextTick } = Vue; |
| | | const { Decoration3 } = DataV; |
| | | const demoOverViewChart = ref(null); |
| | | const demoBusinessTrendsChart = ref(null); |
| | | const App = createApp({ |
| | | setup() { |
| | | let state = reactive({ |
| | |
| | | |
| | | dataList: [ |
| | | { |
| | | id: 1, |
| | | title: '今日累计销量', |
| | | value: 755, |
| | | config: { |
| | | number: [755], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 2, |
| | | title: '本周累计销量', |
| | | value: 3288, |
| | | config: { |
| | | number: [3288], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 3, |
| | | title: '本月累计销量', |
| | | value: 14222, |
| | | config: { |
| | | number: [14222], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 4, |
| | | title: '季度累计销量', |
| | | value: 41022, |
| | | config: { |
| | | number: [41022], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 5, |
| | | title: '年度累计销量', |
| | | value: 176888, |
| | | config: { |
| | | number: [176888], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 6, |
| | | title: '今日目标销量', |
| | | value: 820, |
| | | config: { |
| | | number: [820], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | ], |
| | | completeObj: { |
| | |
| | | unit: '辆', |
| | | }, |
| | | intervalInstance: 0, |
| | | isShowChartVisible: false, |
| | | volumeInfo: { |
| | | id: null, |
| | | title: null, |
| | | value: null, |
| | | } |
| | | }); |
| | | const getOverViewList = () => { |
| | | const iconList = [ |
| | |
| | | }; |
| | | onMounted(() => { |
| | | // getOverViewList(); |
| | | window.addEventListener('resize', () => { |
| | | demoOverViewChart.value.resize(); |
| | | }); |
| | | initOverViewEchart(); |
| | | |
| | | window.parent.addEventListener('resize', () => { |
| | | demoOverViewChart.value.resize(); |
| | | demoBusinessTrendsChart.value.resize(); |
| | | }); |
| | | |
| | | }); |
| | | //初始化今日业绩完成度echart |
| | | const initOverViewEchart = () => { |
| | | var chartDom = document.getElementById('pond'); |
| | | var myChart = echarts.init(chartDom); |
| | |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: '60%', |
| | | left: '54%', |
| | | y: 'center', |
| | | |
| | | formatter: function (name) { |
| | |
| | | }, |
| | | }, |
| | | grid: { |
| | | left: '45' |
| | | left: '25' |
| | | }, |
| | | // title: { |
| | | // text: '76%',//主标题文本 |
| | |
| | | { |
| | | name: '今日业绩完成度', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | radius: ['40%', '60%'], |
| | | center: ['30%', '50%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | |
| | | |
| | | option && myChart.setOption(option); |
| | | }; |
| | | //初始化弹窗echart |
| | | const initBusinessTrendsEchart = () => { |
| | | var chartDom = document.getElementById('businessTrends'); |
| | | var businessTrendsChart = echarts.init(chartDom); |
| | | demoBusinessTrendsChart.value = businessTrendsChart; |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | }, |
| | | grid: { |
| | | left: '3%', // 调整左边距 |
| | | right: '5%', // 调整右边距 |
| | | bottom: '3%', // 调整底部边距 |
| | | top: '5%', // 调整顶部边距 |
| | | containLabel: true, // 确保标签和轴标题被包含在容器内 |
| | | }, |
| | | xAxis: { |
| | | name: '时间', |
| | | type: 'category', |
| | | minInterval: 3600 * 4 * 1000, //12 |
| | | data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45'] |
| | | |
| | | return { state }; |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | }, |
| | | }, |
| | | dataZoom: { |
| | | type: 'inside', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '销售额', |
| | | type: 'line', |
| | | data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 示例数据,模拟起伏更大 |
| | | smooth: true, // 折线平滑 |
| | | lineStyle: { |
| | | width: 2, |
| | | color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
| | | { offset: 0, color: '#62c1fe' }, |
| | | { offset: 0.5, color: '#ad90f7' }, |
| | | { offset: 1, color: '#e875f2' }, |
| | | ]), |
| | | }, |
| | | symbolSize: (value, params) => { |
| | | // 获取数据系列的长度 |
| | | const seriesLength = option.series[0].data.length; |
| | | // 中间节点放大 |
| | | if (params.dataIndex === Math.floor(seriesLength / 2)) { |
| | | return 8; // 中间节点的大小 |
| | | } |
| | | return 8; // 其他节点的大小 |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | option && businessTrendsChart.setOption(option); |
| | | } |
| | | //点击数据项弹窗 |
| | | const handleDataItemClick = (item) => { |
| | | state.volumeInfo = item |
| | | nextTick(() => { |
| | | initBusinessTrendsEchart(); |
| | | }); |
| | | state.isShowChartVisible = true; |
| | | }; |
| | | //关闭弹窗 |
| | | const handleCloseChartVisible = () => { |
| | | state.isShowChartVisible = false; |
| | | } |
| | | |
| | | return { state, handleDataItemClick, handleCloseChartVisible }; |
| | | }, |
| | | }); |
| | | |
| | |
| | | option && myChart.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.addEventListener('resize', () => { |
| | | window.parent.addEventListener('resize', () => { |
| | | myChartRef.value.resize(); |
| | | }); |
| | | initUnionPayEChart(); |
| | |
| | | }; |
| | | onMounted(() => { |
| | | // getOverViewList(); |
| | | window.addEventListener('resize', () => { |
| | | window.parent.addEventListener('resize', () => { |
| | | inspectionChart.value.resize(); |
| | | salesRankRef.value.resize(); |
| | | }); |
| | |
| | | option && creditRatePieRankDom.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.addEventListener('resize', () => { |
| | | window.parent.addEventListener('resize', () => { |
| | | creditRateRankRef.value.resize(); |
| | | creditRatePieRankRef.value.resize(); |
| | | }); |
| | |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | const leaderChartDomRef = ref(null); |
| | | const leaderBarChartDomRef = ref(null); |
| | | const App = createApp({ |
| | | setup() { |
| | | let state = reactive({ |
| | |
| | | const initLeaderBoardChart = () => { |
| | | var chartDom = document.getElementById('leaderChart'); |
| | | var leaderChartDom = echarts.init(chartDom); |
| | | leaderChartDomRef.value = leaderChartDom; |
| | | var option = { |
| | | title: { |
| | | text: '近12月缴费金额', |
| | |
| | | const barXData = state.leaderBoardList.map((item) => item.Name); |
| | | var chartDom = document.getElementById('leaderBarChart'); |
| | | var leaderBarChartDom = echarts.init(chartDom); |
| | | leaderBarChartDomRef.value = leaderBarChartDom; |
| | | var option = { |
| | | xAxis: { |
| | | type: 'category', |
| | |
| | | option && leaderBarChartDom.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.parent.addEventListener('resize', () => { |
| | | leaderChartDomRef.value.resize(); |
| | | leaderBarChartDomRef.value.resize(); |
| | | }); |
| | | initLeaderBoardChart(); |
| | | initLeaderBoardBarChart(); |
| | | }); |
| | |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | |
| | | const monthlyPayChart = ref(null) |
| | | const monthPayRecord = ref(null) |
| | | const monthPayAmount = ref(null) |
| | | createApp({ |
| | | setup() { |
| | | const initMonthlyPayEChart = () => { |
| | | const chartDom = document.getElementById('MonthlyPayChart'); |
| | | const myChart = echarts.init(chartDom); |
| | | monthlyPayChart.value = myChart |
| | | const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }]; |
| | | //下面是一个简单的demo,方便展示数据格式和构成 |
| | | let option = { |
| | |
| | | const initMonthPayRecordEChart = () => { |
| | | const chartDom = document.getElementById('MonthPayRecord'); |
| | | const myMonthPayChart = echarts.init(chartDom); |
| | | monthPayRecord.value = myMonthPayChart |
| | | var monthPayOption = { |
| | | title: { |
| | | text: '近12个月的缴费记录', |
| | |
| | | const initMonthPayAmountEChart = () => { |
| | | const chartDom = document.getElementById('MonthPayAmount'); |
| | | const myMonthPayAmountChart = echarts.init(chartDom); |
| | | monthPayAmount.value = myMonthPayAmountChart |
| | | var monthPayAmountOption = { |
| | | title: { |
| | | text: '近12个月的缴费金额', |
| | |
| | | myMonthPayAmountChart && myMonthPayAmountChart.resize(); |
| | | } |
| | | onMounted(() => { |
| | | window.parent.addEventListener('resize', () => { |
| | | monthlyPayChart.value && monthlyPayChart.value.resize(); |
| | | monthPayRecord.value && monthPayRecord.value.resize(); |
| | | monthPayAmount.value && monthPayAmount.value.resize(); |
| | | }) |
| | | initMonthlyPayEChart(); |
| | | initMonthPayRecordEChart() |
| | | initMonthPayAmountEChart() |
| | |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script> |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script> |
| | | <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script> |
| | | <!-- <script src="/customer_list/ch/ai_html/lib/common.js"></script> --> |
| | | <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" /> |
| | | <style> |
| | | .el-dialog__header { |
| | | margin-right: 0; |
| | | padding: 8px 10px; |
| | | background: #528abe |
| | | } |
| | | |
| | | .el-dialog__title { |
| | | color: #fff; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-dialog__close { |
| | | color: #fff !important; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | |
| | | <div class="top-center-data"> |
| | | <div class="data-item" v-for="(item, index) in state.dataList"> |
| | | <p class="data-item-title">{{item.title}}</p> |
| | | <p class="data-item-desc">{{item.value}}</p> |
| | | <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p> |
| | | </div> |
| | | </div> |
| | | <div class="top-center-chart"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%" |
| | | class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible"> |
| | | <div id="businessTrends" class="w-full h-[500px]"></div> |
| | | </el-dialog> |
| | | </div> |
| | | </body> |
| | | <script> |
| | | const { createApp, onMounted, ref, reactive } = Vue; |
| | | const { createApp, onMounted, ref, reactive, nextTick } = Vue; |
| | | const { Decoration3 } = DataV; |
| | | const demoOverViewChart = ref(null); |
| | | const demoBusinessTrendsChart = ref(null); |
| | | const App = createApp({ |
| | | setup() { |
| | | let state = reactive({ |
| | |
| | | |
| | | dataList: [ |
| | | { |
| | | id: 1, |
| | | title: '今日累计销量', |
| | | value: 755, |
| | | config: { |
| | | number: [755], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 2, |
| | | title: '本周累计销量', |
| | | value: 3288, |
| | | config: { |
| | | number: [3288], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 3, |
| | | title: '本月累计销量', |
| | | value: 14222, |
| | | config: { |
| | | number: [14222], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 4, |
| | | title: '季度累计销量', |
| | | value: 41022, |
| | | config: { |
| | | number: [41022], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 5, |
| | | title: '年度累计销量', |
| | | value: 176888, |
| | | config: { |
| | | number: [176888], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | { |
| | | id: 6, |
| | | title: '今日目标销量', |
| | | value: 820, |
| | | config: { |
| | | number: [820], |
| | | toFixed: 0, |
| | | content: '{nt}', |
| | | textAlign: 'left', |
| | | style: { |
| | | fontSize: 24, |
| | | }, |
| | | }, |
| | | |
| | | }, |
| | | ], |
| | | completeObj: { |
| | |
| | | unit: '辆', |
| | | }, |
| | | intervalInstance: 0, |
| | | isShowChartVisible: false, |
| | | volumeInfo: { |
| | | id: null, |
| | | title: null, |
| | | value: null, |
| | | } |
| | | }); |
| | | const getOverViewList = () => { |
| | | const iconList = [ |
| | |
| | | }; |
| | | onMounted(() => { |
| | | // getOverViewList(); |
| | | window.addEventListener('resize', () => { |
| | | demoOverViewChart.value.resize(); |
| | | }); |
| | | initOverViewEchart(); |
| | | |
| | | window.parent.addEventListener('resize', () => { |
| | | demoOverViewChart.value.resize(); |
| | | demoBusinessTrendsChart.value.resize(); |
| | | }); |
| | | |
| | | }); |
| | | //初始化今日业绩完成度echart |
| | | const initOverViewEchart = () => { |
| | | var chartDom = document.getElementById('pond'); |
| | | var myChart = echarts.init(chartDom); |
| | |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: '60%', |
| | | left: '54%', |
| | | y: 'center', |
| | | |
| | | formatter: function (name) { |
| | |
| | | }, |
| | | }, |
| | | grid: { |
| | | left: '45' |
| | | left: '25' |
| | | }, |
| | | // title: { |
| | | // text: '76%',//主标题文本 |
| | |
| | | { |
| | | name: '今日业绩完成度', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | radius: ['40%', '60%'], |
| | | center: ['30%', '50%'], |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | |
| | | |
| | | option && myChart.setOption(option); |
| | | }; |
| | | //初始化弹窗echart |
| | | const initBusinessTrendsEchart = () => { |
| | | var chartDom = document.getElementById('businessTrends'); |
| | | var businessTrendsChart = echarts.init(chartDom); |
| | | demoBusinessTrendsChart.value = businessTrendsChart; |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | }, |
| | | grid: { |
| | | left: '3%', // 调整左边距 |
| | | right: '5%', // 调整右边距 |
| | | bottom: '3%', // 调整底部边距 |
| | | top: '5%', // 调整顶部边距 |
| | | containLabel: true, // 确保标签和轴标题被包含在容器内 |
| | | }, |
| | | xAxis: { |
| | | name: '时间', |
| | | type: 'category', |
| | | minInterval: 3600 * 4 * 1000, //12 |
| | | data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45'] |
| | | |
| | | return { state }; |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | }, |
| | | }, |
| | | dataZoom: { |
| | | type: 'inside', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '销售额', |
| | | type: 'line', |
| | | data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 示例数据,模拟起伏更大 |
| | | smooth: true, // 折线平滑 |
| | | lineStyle: { |
| | | width: 2, |
| | | color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
| | | { offset: 0, color: '#62c1fe' }, |
| | | { offset: 0.5, color: '#ad90f7' }, |
| | | { offset: 1, color: '#e875f2' }, |
| | | ]), |
| | | }, |
| | | symbolSize: (value, params) => { |
| | | // 获取数据系列的长度 |
| | | const seriesLength = option.series[0].data.length; |
| | | // 中间节点放大 |
| | | if (params.dataIndex === Math.floor(seriesLength / 2)) { |
| | | return 8; // 中间节点的大小 |
| | | } |
| | | return 8; // 其他节点的大小 |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | option && businessTrendsChart.setOption(option); |
| | | } |
| | | //点击数据项弹窗 |
| | | const handleDataItemClick = (item) => { |
| | | state.volumeInfo = item |
| | | nextTick(() => { |
| | | initBusinessTrendsEchart(); |
| | | }); |
| | | state.isShowChartVisible = true; |
| | | }; |
| | | //关闭弹窗 |
| | | const handleCloseChartVisible = () => { |
| | | state.isShowChartVisible = false; |
| | | } |
| | | |
| | | return { state, handleDataItemClick, handleCloseChartVisible }; |
| | | }, |
| | | }); |
| | | |
| | |
| | | option && myChart.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.addEventListener('resize', () => { |
| | | window.parent.addEventListener('resize', () => { |
| | | myChartRef.value.resize(); |
| | | }); |
| | | initUnionPayEChart(); |
| | |
| | | }; |
| | | onMounted(() => { |
| | | // getOverViewList(); |
| | | window.addEventListener('resize', () => { |
| | | window.parent.addEventListener('resize', () => { |
| | | inspectionChart.value.resize(); |
| | | salesRankRef.value.resize(); |
| | | }); |