安装echarts
npm install echarts --save-dev
在index.js中引入echarts组件
import echarts from '../components/echarts.vue' //引入组件
在主页面放置一个大的div盒子
<div id="ref" style="{ width:100%, height: 50% }"></div>
在主页面引入echarts
import * as echarts from 'echarts' //引入echarts文件
//引入echarts
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
//获取需要引入图表的盒子
const chartsDiv = document.getElementById('herf')
//对盒子进行初始化
const chartsEch = echarts.init(chartsDiv);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
name: '科目名称',//y轴名称
nameLocation: 'top',//y坐标轴名称的位置
nameTextStyle: {//y坐标轴名称的字体样式
color: "red",
fontSize: 16,
padding: 120
}
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王麻子', '王五', '赵七', '小二', '严一'],
axisLabel: {
rotate: 50,
},
name: '学生成绩',//x轴名称
nameLocation: 'right',//x坐标轴名称的位置
nameTextStyle: {//x坐标轴名称的字体样式
color: "red",
fontSize: 16,
padding: 300
}
},
series: [
{
name: '数据结构',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [56, 78, 83, 69, 85, 73, 64]
},
{
name: 'java',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [78, 63, 89, 83, 79, 80, 70]
},
{
name: '高等数学',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [81, 83, 82, 87, 90, 91, 85]
},
{ //新的一个柱子 注意不设stack
name: '总数',
type: 'bar',
barGap: '-100%', // 左移100%,stack不再与上面两个在一列
label: {
normal: {
show: true, //显示数值
position: 'top', // 位置设为top
formatter: '{c}',
textStyle: { color: '#000' } //设置数值颜色
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0.3)' // 仍为透明
},
},
data: [215,224,254,239,254,244,219],
},
]
};
chartsEch.setOption(option)
})
效果图