柱状或折线图
<template>
<div class="total_content">
<div class="title"><span>当月总交易额</span><span class="title_right">{{ total }}</span></div>
<div id="Totalvolume" :style="{ height: height, width: width }" />
</div>
</template>
<style scoped>
.total_content{
box-sizing: border-box;
padding:25px 20px;
/* height:251px; */
height:100%;
}
.title{
width:100%;
color:#F9F9F9;
font-size:24px;
border-bottom:0.6px solid gray;
padding-bottom: 18px;
display: flex;
justify-content: space-between;
}
.title_right{
text-align: right;
}
</style>
<script>
import echarts from 'echarts'
require('echarts/theme/infographic') // echarts theme
import resize from './mixins/resize'
const animationDuration = 2000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
name: {
type: String,
default: ''
},
barData: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
chart: null,
total: 0,
refreshtime: null
}
},
created() {
this.refreshtime = setInterval(() => {
this.getTotalvolumefun()
}, 60000)
},
mounted() {
this.$nextTick(() => {
this.getTotalvolumefun()
})
},
destroyed() {
clearInterval(this.refreshtime)
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getTotalvolumefun() {
this.$api.getTotalvolume().then(res => {
this.initChart(res.content.sevenStatisticsDtoList)
this.total = '¥' + res.content.totalSaleCount
})
},
initChart(data) {
const x = data.map(item => {
return item.date
})
const y = data.map(item => {
return item.count
})
this.chart = echarts.init(document.getElementById('Totalvolume'), 'infographic')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'line'// 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: 0,
right: 0,
bottom: 30,
top: 30,
containLabel: true
},
xAxis: [
{
type: 'category',
data: x,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999'
}
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#777'
}
},
axisLine: {
lineStyle: {
color: '#999'
}
}
}
],
series: [
{
name: '交易额',
type: 'line',
stack: '总量',
emphasis: {
focus: 'series'
},
data: y,
barWidth: '42',
animationDuration,
itemStyle: {
normal: {
color: '#fff',
lineStyle: {
color: '#16BAEE'
}
}
},
// smooth: true,
areaStyle: {
// 区域填充样式
color: {
// 填充的颜色 // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
type: 'linear',
x: 0,
y: 0,
colorStops: [
{
offset: 0,
color: '#31DEF8' // 0% 处的颜色
},
{
offset: 1,
color: '#16BAEE' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
]
})
}
}
}
</script>
饼状图
<template>
<div class="total_content">
<div class="title">SKU商品分类</div>
<div id="Classifysku" :style="{ height: height, width: width }" />
</div>
</template>
<style scoped>
.total_content{
padding:25px 20px;
box-sizing: border-box;
height:100%;
}
.title{
width:100%;
color:#F9F9F9;
font-size:24px;
border-bottom:0.6px solid gray;
padding-bottom: 18px;
}
</style>
<script>
import echarts from 'echarts'
require('echarts/theme/infographic') // echarts theme
import resize from './mixins/resize'
// const animationDuration = 2000;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
name: {
type: String,
default: ''
},
barData: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
chart: null,
total: 0,
refreshtime: null
}
},
created() {
this.refreshtime = setInterval(() => {
this.getPlatformskufun()
}, 60000)
},
mounted() {
this.$nextTick(() => {
this.getPlatformskufun()
})
},
destroyed() {
clearInterval(this.refreshtime)
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getPlatformskufun() {
this.$api.getPlatformsku().then(res => {
this.initChart(res.content.skuCategoriesDtoList)
})
},
initChart(data) {
this.chart = echarts.init(
document.getElementById('Classifysku'),
'infographic'
)
this.chart.setOption({
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
selectedMode: 'single',
data: data.map(item => {
return {
name: item.categoryName,
value: item.percentStr
}
}),
label: {
// color: 'rgba(255, 255, 255, 0.3)',
normal: {
// formatter: '{b} {d}%',
// textStyle: {
// color: '#2D99FF',
// fontSize: 12
// },
show: false,
position: 'inner'
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#53B2E9',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 1)'
}
}
]
})
}
}
}
</script>