安装：
npm install echarts -S
https://www.cnblogs.com/Smiled/p/7686316.html
使用：
<template>
<div id="statistics">
<div id="chart_example"></div>
<div id="chart_example2"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
submitApprovalData: [23, 12, 12, 23, 12],
approvalPassData: [12, 23, 16, 21, 16],
totalData: []
}
},
methods: {
},
mounted () {
},
created () {
this.totalData = []
this.submitApprovalData.forEach((item, index) => {
this.totalData.push(item + this.approvalPassData[index])
})
let this_ = this
setTimeout((function () {
let chart = document.getElementById('chart_example')
let chart2 = document.getElementById('chart_example2')
let myChart = echarts.init(chart)
let myChart2 = echarts.init(chart2)
let option = {
color: ['#fff'],
backgroundColor: 'rgba(47,58,102,1)', // 背景色
xAxis : [
{
name: '任务难度', // x轴标题
type : 'category',
data : ['S', 'A', 'B', 'C', 'D'],
axisTick: {
alignWithLabel: true
},
axisLine: { //坐标线
lineStyle: {
type: 'dashed',
color: '#48558C', // 轴线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: { // 刻度
show: false // 不显示刻度线
},
nameTextStyle: { // 标题样式
color: ['#fff']
},
axisLabel: {
textStyle: {
color: '#fff', // 坐标值得具体的颜色
fontSize: 14
}
}
}
],
yAxis : [
{
name: '任务数量',
type : 'value',
axisLine: { // 线
show: false
},
axisTick: { // 刻度
show: false
},
splitLine: { // 网格为虚线
show: true,
lineStyle: {
type: 'dashed',
color: '#48558C'
}
},
nameTextStyle: {
color: ['#fff']
},
axisLabel: {
textStyle: {
color: '#fff', // 坐标值得具体的颜色
fontSize: 14
}
}
}
],
grid: { // 设置图标边距
left: '5%',
right: '15%',
bottom: '5%',
containLabel: true
},
legend: {
selectedMode: false, // 取消图例上的点击事件
icon: 'circle', // 图例为圆形
right: 15,
top: 10,
orient: 'vertical', // 纵列分布
itemWidth: 10, // 图例图标的宽
itemHeight: 10, // 图例图标的高
textStyle: {
fontSize: 12,
color: '#fff' // 值的具体的颜色
}
},
series : [
{
name: '周一',
type: 'bar',
barWidth: '20', // 设置宽度
stack: '任务数量', // 名称一致的则叠加
data: this_.submitApprovalData,
itemStyle: {
normal: {
color: '#5E76D7', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子上方显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '周二',
type: 'bar',
barWidth: '20',
stack: '任务数量',
data: this_.approvalPassData,
itemStyle: {
normal: {
color: '#212948', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子内部显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '', // 名称为空，则不显示图例
type: 'bar',
stack: '任务数量',
label: {
normal: {
offset:['50', '80'],
show: true,
position: 'insideBottom', // 显示总数
formatter: '{c}',
textStyle: { color: '#fff' }
}
},
itemStyle: {
normal: {
color: 'rgba(193,35,43,0)' // 不显示总数的柱状图
}
},
data: this_.totalData // 总数的数据，自己算
}
]
}
let option2 = {
color: ['#fff'],
backgroundColor: 'rgba(47,58,102,1)', // 背景色
xAxis : [
{
name: '任务难度', // x轴标题
type : 'category',
data : ['S', 'A', 'B', 'C', 'D'],
axisTick: {
alignWithLabel: true
},
axisLine: { //坐标线
lineStyle: {
type: 'dashed',
color: '#48558C', // 轴线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: { // 刻度
show: false // 不显示刻度线
},
nameTextStyle: { // 标题样式
color: ['#fff']
},
axisLabel: {
textStyle: {
color: '#fff', // 坐标值得具体的颜色
fontSize: 14
}
}
}
],
yAxis : [
{
name: '任务数量',
type : 'value',
axisLine: { // 线
show: false
},
axisTick: { // 刻度
show: false
},
splitLine: { // 网格为虚线
show: true,
lineStyle: {
type: 'dashed',
color: '#48558C'
}
},
nameTextStyle: {
color: ['#fff']
},
axisLabel: {
textStyle: {
color: '#fff', // 坐标值得具体的颜色
fontSize: 14
}
}
}
],
grid: { // 设置图标边距
left: '5%',
right: '15%',
bottom: '5%',
containLabel: true
},
legend: {
selectedMode: false, // 取消图例上的点击事件
icon: 'circle', // 图例为圆形
right: 15,
top: 10,
orient: 'vertical', // 纵列分布
itemWidth: 10, // 图例图标的宽
itemHeight: 10, // 图例图标的高
textStyle: {
fontSize: 12,
color: '#fff' // 值的具体的颜色
}
},
series : [
{
name: '周一',
type: 'bar',
barWidth: '20', // 设置宽度
stack: '任务数量', // 名称一致的则叠加
data: this_.submitApprovalData,
itemStyle: {
normal: {
color: '#212948', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子上方显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '周二',
type: 'bar',
barWidth: '20',
stack: '任务数量',
data: this_.approvalPassData,
itemStyle: {
normal: {
color: '#5E76D7', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子内部显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '周三',
type: 'bar',
barWidth: '20',
stack: '任务数量',
data: this_.submitApprovalData,
itemStyle: {
normal: {
color: '#89A0FF', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子内部显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '平均/日',
type: 'bar',
barWidth: '20',
barCategoryGap: 10,
data: this_.approvalPassData,
itemStyle: {
normal: {
color: '#84B5EE', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'inside', // 值在柱子内部显示
textStyle: {
color: '#fff' // 值得颜色
}
}
}
}
}, {
name: '', // 名称为空，则不显示图例
type: 'bar',
stack: '任务数量',
label: {
normal: {
offset: ['50', '80'],
show: true,
position: 'insideBottom', // 显示总数
formatter: '{c}',
textStyle: { color: '#fff' }
}
},
itemStyle: {
normal: {
color: 'rgba(193,35,43,0)' // 不显示总数的柱状图
}
},
data: this_.totalData // 总数的数据，自己算
}
]
}
myChart.setOption(option);
myChart2.setOption(option2);
// 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
}), 200)
},
components: {
},
watch: {
}
}
</script>
<style lang="less">
#statistics {
width: 50%;
padding-top: 20px;
padding-left: 20px;
#chart_example{
width: 70%;
height: 270px;
margin-bottom: 20px;
}
#chart_example2{
width: 70%;
height: 270px;
}
}
</style>
使用参考：https://blog.csdn.net/guozhangqiang/article/details/82379306
样式参考：https://blog.csdn.net/Cynthia_Yue27/article/details/81434493
注：
不需要在main.js引用，以上代码，安装完毕后可以直接使用，数据仅供参考
报错：
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'getAttribute' of null"
报错
- 原因：
初始化时，元素未加载完，获取不到：
<div id="chart_example"></div>
<div id="chart_example2"></div>
- 解决办法：
setTimeout，延迟初始化时间，具体看代码
案例：
![]()
屏幕快照 2019-05-29 下午5.26.08.png
屏幕快照 2019-05-29 下午5.26.08.png
