标签：vue cli color data chart default type echarts
柱状或折线图
<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>
标签：vue,cli,color,data,chart,default,type,echarts 来源： https://blog.csdn.net/blue__k/article/details/116124964
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。