eCharts是一个基于 JavaScript 的开源可视化图表库。
实现集成了前端可视化的多种手段。
官网链接:ECharts官网
初学者建议去官网看看起步的内容,另外博主也是今天刚学的噢,写得不好多多体谅。
下面介绍在vue项目终集成eCharts组件库:
-
创建好你的vue项目。
该步骤,默认你已经初始化好你的vue项目了!(还没学框架的去官网看看html格式的) -
安装依赖。
npm命令行输入(你的环境已经安装好nodejs):
npm install echarts --save
-
测试例子。
例子都是从官网上复制而来,本人只是做了框架的封装。
官网例子大全:eCharts各种可视化例子大全
注意1:你定义的存放eCharts元素的div,一定得指定宽高!!不然没有效果!!!
注意2:你的eCharts元素的创建必须得让div父元素先创建完!!在vue生命周期上就是得在created钩子函数之后!!!我用的是mounted钩子函数。
我在代码实现定义宽高的style:
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
好咯,下面请看我的例子:
折线图例子:
截图:vue代码:
<template>
<div class="about">
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
}
},
methods:{
},
mounted(){
console.log('create-----');
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:'折线图',
textAlign:'auto'
},//标题组件
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
},
yAxis: {
type: 'value',
min:0,//最小值
interval:20 //设置强制刻度值
},
// 是否显示提示框组件
tooltip:{
show:true
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);
}
}
</script>
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
柱形图例子:
截图:
代码:
<template>
<div id="main"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
}
},
methods:{
},
mounted(){
console.log('create-----');
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:'柱形图',
textAlign:'auto'
},//标题组件
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
},
yAxis: {
type: 'value',
min:0,//最小值
interval:20 //设置强制刻度值
},
// 是否显示提示框组件
tooltip:{
show:true
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar'
}
]
};
option && myChart.setOption(option);
}
}
</script>
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
散点图例子
截图:
代码:
<template>
<div id="main"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
}
},
methods:{
},
mounted(){
console.log('create-----');
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:'散点图'
},
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
]
};
option && myChart.setOption(option);
}
}
</script>
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
平行坐标图例子
截图:
代码:
<template>
<div id="main"></div>
</template>
<script>
import * as echarts from 'echarts';
//官网例子
// https://echarts.apache.org/examples/zh/index.html#chart-type-line
export default {
data(){
return{
}
},
methods:{
},
mounted(){
console.log('create-----');
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title:{
text:'平行坐标图'
},
parallelAxis: [
{ dim: 0, name: 'Price' },
{ dim: 1, name: 'Net Weight' },
{ dim: 2, name: 'Amount' },
{
dim: 3,
name: 'Score',
type: 'category',
data: ['Excellent', 'Good', 'OK', 'Bad']
}
],
series: {
type: 'parallel',
lineStyle: {
width: 4
},
data: [
[12.99, 100, 82, 'Good'],
[9.99, 80, 77, 'OK'],
[20, 120, 60, 'Excellent']
]
}
};
option && myChart.setOption(option);
}
}
</script>
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
雷达图例子
截图:
代码:
<template>
<div id="main"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
}
},
methods:{
},
mounted(){
console.log('create-----');
// 基于准备好的dom,初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
const dataBJ = [
[55, 9, 56, 0.46, 18, 6, 1],
[25, 11, 21, 0.65, 34, 9, 2],
[56, 7, 63, 0.3, 14, 5, 3],
[33, 7, 29, 0.33, 16, 6, 4],
[42, 24, 44, 0.76, 40, 16, 5],
[82, 58, 90, 1.77, 68, 33, 6],
[74, 49, 77, 1.46, 48, 27, 7],
[78, 55, 80, 1.29, 59, 29, 8],
[267, 216, 280, 4.8, 108, 64, 9],
[185, 127, 216, 2.52, 61, 27, 10],
[39, 19, 38, 0.57, 31, 15, 11],
[41, 11, 40, 0.43, 21, 7, 12],
[64, 38, 74, 1.04, 46, 22, 13],
[108, 79, 120, 1.7, 75, 41, 14],
[108, 63, 116, 1.48, 44, 26, 15],
[33, 6, 29, 0.34, 13, 5, 16],
[94, 66, 110, 1.54, 62, 31, 17],
[186, 142, 192, 3.88, 93, 79, 18],
[57, 31, 54, 0.96, 32, 14, 19],
[22, 8, 17, 0.48, 23, 10, 20],
[39, 15, 36, 0.61, 29, 13, 21],
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28],
[134, 96, 165, 2.76, 83, 41, 29],
[52, 24, 60, 1.03, 50, 21, 30],
[46, 5, 49, 0.28, 10, 6, 31]
];
const dataGZ = [
[26, 37, 27, 1.163, 27, 13, 1],
[85, 62, 71, 1.195, 60, 8, 2],
[78, 38, 74, 1.363, 37, 7, 3],
[21, 21, 36, 0.634, 40, 9, 4],
[41, 42, 46, 0.915, 81, 13, 5],
[56, 52, 69, 1.067, 92, 16, 6],
[64, 30, 28, 0.924, 51, 2, 7],
[55, 48, 74, 1.236, 75, 26, 8],
[76, 85, 113, 1.237, 114, 27, 9],
[91, 81, 104, 1.041, 56, 40, 10],
[84, 39, 60, 0.964, 25, 11, 11],
[64, 51, 101, 0.862, 58, 23, 12],
[70, 69, 120, 1.198, 65, 36, 13],
[77, 105, 178, 2.549, 64, 16, 14],
[109, 68, 87, 0.996, 74, 29, 15],
[73, 68, 97, 0.905, 51, 34, 16],
[54, 27, 47, 0.592, 53, 12, 17],
[51, 61, 97, 0.811, 65, 19, 18],
[91, 71, 121, 1.374, 43, 18, 19],
[73, 102, 182, 2.787, 44, 19, 20],
[73, 50, 76, 0.717, 31, 20, 21],
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28],
[82, 92, 174, 3.29, 0, 13, 29],
[106, 116, 188, 3.628, 101, 16, 30],
[118, 50, 0, 1.383, 76, 11, 31]
];
const dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7],
[89, 65, 78, 0.86, 51, 26, 8],
[53, 33, 47, 0.64, 50, 17, 9],
[80, 55, 80, 1.01, 75, 24, 10],
[117, 81, 124, 1.03, 45, 24, 11],
[99, 71, 142, 1.1, 62, 42, 12],
[95, 69, 130, 1.28, 74, 50, 13],
[116, 87, 131, 1.47, 84, 40, 14],
[108, 80, 121, 1.3, 85, 37, 15],
[134, 83, 167, 1.16, 57, 43, 16],
[79, 43, 107, 1.05, 59, 37, 17],
[71, 46, 89, 0.86, 64, 25, 18],
[97, 71, 113, 1.17, 88, 31, 19],
[84, 57, 91, 0.85, 55, 31, 20],
[87, 63, 101, 0.9, 56, 41, 21],
[104, 77, 119, 1.09, 73, 48, 22],
[87, 62, 100, 1, 72, 28, 23],
[168, 128, 172, 1.49, 97, 56, 24],
[65, 45, 51, 0.74, 39, 17, 25],
[39, 24, 38, 0.61, 47, 17, 26],
[39, 24, 39, 0.59, 50, 19, 27],
[93, 68, 96, 1.05, 79, 29, 28],
[188, 143, 197, 1.66, 99, 51, 29],
[174, 131, 174, 1.55, 108, 50, 30],
[187, 143, 201, 1.39, 89, 53, 31]
];
const lineStyle = {
width: 1,
opacity: 0.5
};
option = {
backgroundColor: '#161627',
title: {
text: '雷达图',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
bottom: 5,
data: ['Beijing', 'Shanghai', 'Guangzhou'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
selectedMode: 'single'
},
radar: {
indicator: [
{ name: 'AQI', max: 300 },
{ name: 'PM2.5', max: 250 },
{ name: 'PM10', max: 300 },
{ name: 'CO', max: 5 },
{ name: 'NO2', max: 200 },
{ name: 'SO2', max: 100 }
],
shape: 'circle',
splitNumber: 5,
axisName: {
color: 'rgb(238, 197, 102)'
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: [
{
name: 'Beijing',
type: 'radar',
lineStyle: lineStyle,
data: dataBJ,
symbol: 'none',
itemStyle: {
color: '#F9713C'
},
areaStyle: {
opacity: 0.1
}
},
{
name: 'Shanghai',
type: 'radar',
lineStyle: lineStyle,
data: dataSH,
symbol: 'none',
itemStyle: {
color: '#B3E4A1'
},
areaStyle: {
opacity: 0.05
}
},
{
name: 'Guangzhou',
type: 'radar',
lineStyle: lineStyle,
data: dataGZ,
symbol: 'none',
itemStyle: {
color: 'rgb(238, 197, 102)'
},
areaStyle: {
opacity: 0.05
}
}
]
};
option && myChart.setOption(option);
}
}
</script>
<style scoped>
#main{
width: 100%;
height:600px;
}
</style>
好咯,前端可视化还是蛮高级的,它让人看起来高大尚!eCharts是挺好的,它还能3d展示和矢量展示!