官网:
Examples - Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack
效果图:
关键代码:
完整代码:
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main1" style="width: 1000px;height:600px;"></div>
drawLine1(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption( {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
formatter(a) {
let res = '';
let sum = 0;
// console.log('a=',a)
a.forEach((item, index) => {
if (index === 0) {
res += `${item.axisValue}<br/>`;
}
sum += item.value;
res += `${item.marker} ${item.seriesName} : ${item.value}<br/>`;
if (index === a.length - 1) {
res += `总数 : ${sum}`;
}
});
return res;
},
},
legend: {
bottom:-5,
icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 40 // 设置间距
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8', '项目9', '项目10']
},
series: [
{
name: '已完成',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 390, 330, 320]
},
{
name: '施工中',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210]
}
]
});
},