// 折线图数据示例
lineOption: {
tooltip: {
trigger: 'axis',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
calculable: true,
xAxis: {
type: 'category',
data: ['培训课件', '课程', '晒课资源', '参赛资源', '案例'],
axisLabel: { rotate: -25 }
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
data: [2.6, 5.9, 9.0, 26.4, 28.7],
type: 'line',
color: '#5087EC'
// 线条是否平滑
// smooth: true
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2()
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3()
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4()
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5()
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
},
// 条形图数据示例
barOption: {
title: {
// text: '专职 vs 兼职'
},
tooltip: {
trigger: 'axis',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
calculable: true,
xAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: 'category',
// prettier-ignore
data: []
}
],
series: [
{
name: '',
type: 'bar',
color: '#5087EC',
data: []
// ,
// 显示最大最小值图标
// markPoint: {
// data: [
// { type: 'max', name: 'Max' },
// { type: 'min', name: 'Min' }
// ]
// }
// ,
// markLine: {
// data: [{ type: 'average', name: 'Avg' }]
// }
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool1: {
show: true,
title: '转为折线图',
icon: ('image://' + require('@/assets/svg/lineChart.png')),
onclick: () => {
this.myTool1()
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3()
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4()
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5()
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
},
// 柱状图数据示例
histogramOption: {
tooltip: {
trigger: 'axis',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
calculable: true,
xAxis: {
type: 'category',
data: ['培训课件', '课程', '晒课资源', '参赛资源', '案例'],
axisLabel: { rotate: -25 }
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
data: [2.6, 5.9, 9.0, 26.4, 28.7],
color: '#5087EC',
type: 'bar'
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool1: {
show: true,
title: '转为折线图',
icon: ('image://' + require('@/assets/svg/lineChart.png')),
onclick: () => {
this.myTool1()
}
},
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2()
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4()
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5()
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
},
// 雷达图数据示例
radarMapOption: {
title: {
text: ''
},
// legend: {
// data: ['兼职心理老师原职务/任教分布情况']
// },
tooltip: {
trigger: 'item',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
radar: {
// shape: 'circle',
indicator: [
{ name: '文章', max: 10 },
{ name: '文档', max: 10 },
{ name: '视频', max: 10 },
{ name: '图片', max: 10 },
{ name: '压缩包', max: 10 }
]
},
series: [
{
name: '资源格式上传情况',
type: 'radar',
color: '#5087EC',
data: [
{
value: [],
name: '资源格式上传情况'
}
]
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool1: {
show: true,
title: '转为折线图',
icon: ('image://' + require('@/assets/svg/lineChart.png')),
onclick: () => {
this.myTool1()
}
},
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2()
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3()
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5()
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
},
// 饼图数据示例
pieOption: {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
legend: {
orient: 'vertical',
left: 'left'
},
color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'],
series: [
{
name: '',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'A' },
{ value: 735, name: 'B' },
{ value: 580, name: 'C' },
{ value: 484, name: 'D' },
{ value: 300, name: 'E' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool1: {
show: true,
title: '转为折线图',
icon: ('image://' + require('@/assets/svg/lineChart.png')),
onclick: () => {
this.myTool1()
}
},
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2()
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3()
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4()
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
},
// 热词图数据示例
hotWordOption: {
title: {
text: ''
},
tooltip: {
trigger: 'item',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
series: [{
type: 'wordCloud',
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
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: [
{ name: '许嵩', value: 15000 },
{ name: '周杰伦', value: 16181 },
{ name: '汪苏泷', value: 4386 },
{ name: '徐良', value: 2055 },
{ name: '汪峰', value: 6467 },
{ name: '王菲', value: 6244 },
{ name: '萧敬腾', value: 6898 },
{ name: '许巍', value: 8484 },
{ name: '胡歌', value: 11112 },
{ name: '迪卡普里奥', value: 9112 },
{ name: '李小龙', value: 18112 },
{ name: '成龙', value: 14312 }
]
}],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool1: {
show: true,
title: '转为折线图',
icon: ('image://' + require('@/assets/svg/lineChart.png')),
onclick: () => {
this.myTool1()
}
},
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2()
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3()
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4()
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5()
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
}
转换方法:
// 折线图
myTool1 (id) {
var chart1 = this.$echarts.init(document.getElementById(id))
// 绘制图表
chart1.clear()
chart1.setOption({
tooltip: {
trigger: 'axis',
extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)'
},
calculable: true,
xAxis: {
type: 'category',
data: ['培训课件', '课程', '晒课资源', '参赛资源', '案例'],
axisLabel: { rotate: -25 }
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
data: [2.6, 5.9, 9.0, 26.4, 28.7],
type: 'line',
color: '#5087EC'
// 线条是否平滑
// smooth: true
}
],
toolbox: {
show: true,
feature: {
mark: { show: true },
// restore: { show: true },
myTool2: {
show: true,
title: '转为条形图',
icon: ('image://' + require('@/assets/svg/barChart.png')),
onclick: () => {
this.myTool2(id)
}
},
myTool3: {
show: true,
title: '转为柱状图',
icon: ('image://' + require('@/assets/svg/histogram.png')),
onclick: () => {
this.myTool3(id)
}
},
myTool4: {
show: true,
title: '转为雷达图',
icon: ('image://' + require('@/assets/svg/radarMap.png')),
onclick: () => {
this.myTool4(id)
}
},
myTool5: {
show: true,
title: '转为饼图',
icon: ('image://' + require('@/assets/svg/pieEcharts.png')),
onclick: () => {
this.myTool5(id)
}
},
myTool6: {
show: true,
title: '转为热词图',
icon: ('image://' + require('@/assets/svg/hotWord.png')),
onclick: () => {
this.myTool6(id)
}
},
saveAsImage: {
show: true,
pixelRatio: 1,
title: '保存为图片',
type: 'png',
lang: ['点击保存'],
name: '数据统计图表'
}
// magicType: { type: ['line', 'bar'] }
}
}
})
},