Echarts——基于js的可视化图表库
- 官网
- 基本使用步骤：
（1）引入js文件并使用
1、下载引入echarts.js文件（在 www.jsdelivr.com/package/npm… 选择 dist/echarts.js，点击并保存为 echarts.js 文件。）
2、准备一个有宽高的容器
3、基于准备好的dom，初始化echarts实例
4、指定图表的配置项和数据
5、使用刚指定的配置项和数据显示图表
示例如下：
<!-- 1、下载引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
<style>
.main{
width: 620px;
height: 520px;
}
</style>
<body>
<!-- 2、准备一个有宽高的容器 -->
<div class="main"></div>
<script>
// 3、基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector('.main'));
// 4、指定图表的配置项和数据
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
结果如下：
（2）利用npm安装并在vue项目中使用
1、安装echarts
npm install echarts --save
2、在main.js中引入并挂在到Vue实例上
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、准备一个有宽高的容器
4、基于准备好的dom，初始化echarts实例（注意要通过this.$echarts来使用echarts）
4、指定图表的配置项和数据
5、在mounted函数中调用echarts初始化函数
实例如下：
<template>
<div style="width: 47%; height: 360px" id="main"></div>
</template>
<script>
// 通过this.$echarts来使用
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'pie',
mounted() {
// 在通过mounted调用即可
this.echartsInit()
},
methods: {
// 初始化echarts
echartsInit() {
// 3、基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.querySelector('#main'))
myChart.showLoading()
const data = [
{ value: 4, name: '小学' },
{ value: 5, name: '初中' },
{ value: 8, name: '高中' },
{ value: 2, name: '职高' },
{ value: 7, name: '大本' },
{ value: 9, name: '大专' },
{ value: 4, name: '硕士' },
{ value: 3, name: '博士' },
]
myChart.hideLoading() // 隐藏 loading 效果
myChart.setOption({
title: {
text: '员工受教育程度',
left: 'center',
top: 20,
textStyle: {
color: '#008a89',
},
},
tooltip: {
trigger: 'item',
},
visualMap: {
show: false,
min: 0,
max: 15,
inRange: {
colorLightness: [0, 1],
},
},
series: [
{
name: '人数',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data.sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
color: '#008a89',
},
labelLine: {
lineStyle: {
color: '#008a89',
},
smooth: 0.2,
length: 10,
length2: 20,
},
itemStyle: {
normal: {
color: function (colors) {
const colorList = ['indigo', 'purple', '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc']
return colorList[colors.dataIndex]
},
},
color: '#008a89',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
},
},
],
})
},
},
}
</script>
<style scoped>
#main {
margin-top: 30px;
background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
opacity: 0.7;
}
</style>
结果如下：
-利用axios发送请求得数据填充的图表中（vue项目中）
核心：将echarts实例的setOptions函数置于请求成功函数中，并把对应配置设置为请求成功的数据。
示例如下：
this.axios({
url: 'http://localhost:8083/xxx',
method: 'GET',
async: false,
}).then((res) => {
const data = res.data
myChart.hideLoading() // 隐藏 loading 效果
myChart.setOption({
title: {
text: '员工受教育程度',
left: 'center',
top: 20,
textStyle: {
color: '#008a89',
},
},
tooltip: {
trigger: 'item',
},
visualMap: {
show: false,
min: 0,
// 拿到数据后颜色出现全黑或者全白，调节max
max: 15,
inRange: {
colorLightness: [0, 1],
},
},
series: [
{
name: '人数',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
// 将成功请求的数据放入配置中
data: data.sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
color: '#008a89',
},
labelLine: {
lineStyle: {
color: '#008a89',
},
smooth: 0.2,
length: 10,
length2: 20,
},
itemStyle: {
normal: {
color: function (colors) {
const colorList = ['indigo', 'purple', '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc']
return colorList[colors.dataIndex]
},
},
color: '#008a89',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
},
},
],
})
})
-出现全黑或者全白（已经对颜色进行配置但是显示不出来）
调节visualMap配置中的min和max，官网给的是偏大的值（如果没问题就不需要改动了）
可以参考一下我前面示例中的配置：
visualMap: {
show: false,
min: 0,
// 拿到数据后颜色出现全黑或者全白，调节max
max: 100,
inRange: {
colorLightness: [0, 1],
},
},
以上是我使用echarts的一些总结，如有错误欢迎指出，如有缺漏欢迎补充。😊😃
