Apache ECharts
Apache ECharts 是基于 JavaScript 的开源可视化图表库,它可以将数据渲染成图表
1.安装
npm install echarts --save
2.引入
main.js中引入(此处展示的为5.X的引入,4.X的引入应改为import echarts from ‘echarts’)
import * as echarts from 'echarts'
3.使用案例
div /
<div style="display: flex;flex-wrap: wrap;">
<div id="eChartsId1" style="width: 900px; height: 600px;"></div>
<div id="eChartsId2" style="width: 900px; height: 600px;"></div>
</div>
JavaScript / methods
import * as echarts from 'echarts';
//省略其它代码......
tb() {
//指定图表渲染位置
let myChart = echarts.init(document.getElementById("eChartsId1"));
myChart.setOption({
title: {
text: "ysd",
fontSize: 24,
left: '10%'
},
//x轴
xAxis: {
name: 'a',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
//y轴
yAxis: {
name: 'b',
},
series: [
{
name: 'yyy',
data: [16, 22, 28, 23, 32, 28],
type: 'line',
stack: 'line1',
smooth: true
},
{
name: 'sss',
data: [15, 15, 23, 25, 18, 28],
type: 'line',
stack: 'line2',
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: {
color: '#fff',
fontSize: '12'
}
}
});
let myChart1 = echarts.init(document.getElementById("eChartsId2"));
myChart1.setOption({
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
name: 'ddd',
data: [10, 22, 28, 23, 19],
type: 'line',
smooth: true,
areaStyle: {
color: 'lightblue',
opacity: 0.5
}
}
],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: {
color: '#fff',
fontSize: '12'
}
}
});
}
展示图