第一次简单使用echarts图表,因此在博客记录一下
柱状图
<template>
<div>
<div class="page-all">
<div id="orderbox" style="width:600px;height:400px;"></div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.getOrderCharts()
},
methods: {
// 订单金额柱状图
getOrderCharts() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("orderbox"));
// 指定图表的配置项和数据
var option = {
title: {
text: '单位:元',
textStyle: {
color: '#999999',
fontSize: 14
},
left: 20
},
legend: {
data: ['销量'],
right: '10%'
},
grid: {},
xAxis: {
data: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份", "7月份", "8月份"],
// 不显示刻度
axisTick: {
show: false
},
// 不显示横线
axisLine: {
show: false
}
},
yAxis: {
show: false
},
series: [{
name: '销量',
type: 'bar',
data: [4111, 6280, 3162, 5120, 3180, 2220, 5403, 1000],
// 是否展示背景
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
// 是否显示数字
label: {
show: true,
position: 'top',
},
// 柱状图的宽度
barWidth: '30px'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
}
};
</script>
效果图:
折线图
<template>
<div>
<div class="page-all">
<div id="orderbox" style="width: 600px;height: 400px;"></div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.getStudentCharts()
},
methods: {
// 学生数量折线图
getStudentCharts() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("studentbox"));
// 指定图表的配置项和数据
var option = {
title: {
text: '单位:元',
textStyle: {
color: '#999999',
fontSize: 14
},
left: 20
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['学生数量'],
right: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: true
},
data: ['6月份', '8月份', '10月份', '12月份', '2月份', '4月份']
},
yAxis: {
type: 'value'
},
series: [{
name: '学生数量',
data: [18000, 22932, 19901, 33934, 41290, 21330],
type: 'line',
areaStyle: {
color: '#00D0B0',
opacity: '0.2'
},
lineStyle: {
color: '#00D0B0',
},
symbolSize: 4,
smooth: true,
itemStyle: {
normal: {
color: '#00D0B0', //拐点颜色
},
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
}
};
</script>
效果图