史上最全echarts可视化图表详解
前言
在前端漫长的开发生涯中，相信大家都会遇到各种echarts图表，那么要怎么去实现这些echarts图表呢，其实可以通过echarts官方api配合vue来实现这些操作，下面将从安装到使用以及图表的配置项包括每一个环节比较容易出现的问题来为大家进行详解。
一、安装echarts图表
echarts的安装呢其实非常的容易，简单来说只需要两步：
1.下载echarts
在下载echarts时，很多人可能会遇到安装不成功或者报错的问题，解决办法可以通过重装或者是装之前的版本来解决。
npm install echarts --save
npm install echarts@4.8.0 --save
2.main.js中引入并注册
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
到这里，echarts的安装也就结束了，是不是特别简单，哈哈，先别急，接着往下看…
二、使用echarts图表
上面我们已经将echarts安装完成了，接下来需要在项目中使用，那其实echarts的使用也非常的简单，具体分为下面几步：
1.为echarts准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）
<div id="radarChart" :style="{ width: '300px', height: '300px' }"></div>
2.获取定义id并通过echarts.init()方法初始化echarts实例
let radarVariable = document.getElementById("radarChart");
let myChartOne = this.$echarts.init(radarVariable);
3.根据个人需求调整图表的配置项和数据
let option = {
......
}
4.通过setOption()方法生成图表
myChartOne.setOption(option)
可能看到这，你还是不知道这玩意到底该怎么下手啊，别着急，看完下面，相信你直接就可以上手操作，下面是我整理的比较常用到的echarts图表实例代码，大家可以借助代码以及注释来帮助大家快速理解上手。
实例
1.单个柱状图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="generalStyle">
<div id="pillarsChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getJxbyl} from '@api/screen'//引入的接口文件
const pillarsChart = [] //定义一个空数组用于将数据push到这里
export default {
data (){
return{
upperPillar:[],//定义一个空数组用来存放接口返回的数据
xPillar:[],//x轴数据
yPillar:[],//y轴数据
}
},
mounted() {
this.pillarsEcharts(); //定义一个方法在methods中调用
this.getJxbyl();//定义一个接口方法在methods中调用
},
methods: {
//接口方法
getJxbyl(){
//请求接口
getJxbyl({}).then(res=>{
//请求成功通过返回数据进行赋值
this.upperPillar = res.data
this.xPillar = res.data.Xdata
this.yPillar = res.data.Ydata
this.pillarsEcharts()//一定要调用图表的方法
})
},
//图表方法
pillarsEcharts() {
//获取id并初始化图表
let pillarsVariable = document.getElementById("pillarsChart");
let myChartTherr = this.$echarts.init(pillarsVariable);
//配置项
let option = {
color: ["rgb(40,135,193)"],//图表颜色
tooltip: {//鼠标触摸显示值
foratter: function (params) {
return params[0].name + params[0].seriesName + ":params[0].data"
}
},
xAxis: {//x轴设置
type: 'category',//类型
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)"//设置x轴的颜色
}
},
axisLabel: {//设置x轴文字的倾斜
interval: 0,
rotate: 40//倾斜角度
},
data: this.xPillar && this.xPillar.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
},
yAxis: {//y轴设置
type: 'value',//类型
name: "（台）",//顶端的文本描述
axisLine: { /y轴文字颜色
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//去掉背景网格
show: false
}
},
series: [{
data: this.yPillar && this.yPillar.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
type: 'bar',//类型
barWidth: 12, // 设置柱状图的宽度
}]
}
myChartTherr.setOption(option)//通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartTherr
}
pillarsChart.push(chartObj)//通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartTherr.resize();//图表自适应的一个方法
});
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
2.基础折线图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="tendency">
<div id="brokenChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {obd} from '@api/screen' //引入接口文件
const chartsBroken = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
brokenLineX: [], //折线X轴数据
brokenLineY: [], //折线Y轴数据
}
},
mounted() {
this.brokenChart(); //定义一个方法在methods中调用
this.obd(); //定义一个接口方法在methods中调用
},
methods: {
//请求接口
obd() {
obd({}).then(res => {
//请求成功通过返回数据进行赋值
this.brokenLineX = res.data.xData
this.brokenLineY = res.data.yData
this.brokenChart() //一定一定要调用图表方法
})
},
//图表方法
brokenChart() {
//获取id并初始化图表
let brokenChart = document.getElementById("brokenChart");
let myChartTherr = this.$echarts.init(brokenChart);
//配置项
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985', //折线的颜色
}
}
},
xAxis: {
type: "category", //类型
data: this.brokenLineX && this.brokenLineX.map(item =>item), //拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
},
grid: { //调整图表坐标
x: "0", //直角坐标
y: "20", //左上纵坐标
x2: "0", //右下横坐标
y2: "40", //右下纵坐标
containLabel: true,
},
yAxis: {
type: "value",
},
series: [{
data: this.brokenLineY && this.brokenLineY.map(item =>item), //拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
type: 'line' //类型
}],
}
myChartTherr.setOption(option) //通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartTherr
}
chartsBroken.push(chartObj) //通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartTherr.resize(); //图表自适应的一个方法
});
},
},
}
</script>
<style scoped>
.tendency {
width: 100%;
height: 90%;
}
</style>
3.基础饼状图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="cakeStyle">
<div id="cakeChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getMeachDistribution} from '@api/screen' //引入的接口文件
const cakeChart = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
upperCake: [], //图表数据
}
},
mounted() {
this.cakeEcharts(); //定义一个图表方法在methods中调用
this.getMeachDistribution(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getMeachDistribution() {
//请求接口
getMeachDistribution({}).then(res => {
//请求成功通过返回数据进行赋值
this.upperCake = res.data.data
this.cakeEcharts() //一定要调用图表的方法
})
},
//图表方法
cakeEcharts() {
let showed = this.cookie.length ? false : true //对数据非空判断，如果没有数据图表显示暂无数据字样
//获取id并初始化图表
let cakeVariable = document.getElementById("cakeChart");
let myChartFour = this.$echarts.init(cakeVariable);
let option = {
title: {
show: showed, // 是否显示title
text: '暂无数据', //显示文本
left: 'center', //水平居中
top: 'center', //垂直居中
},
color: ["rgb(202,121,59)", "rgb(44,154,216)", "rgb(54,197,183)", "rgb(29,168,195)"], //图表颜色
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: this.upperCake.map(item => { //拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
return {
value: item.value,
name: item.name
}
}),
tooltip: { //鼠标触摸显示值
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
itemStyle: { //文本的展示样式
normal: {
label: {
show: true, //显示
formatter: '{b} : {c} ({d}%)' //每一块的百分比显示
},
labelLine: {
show: true //显示
}
}
},
}]
}
myChartFour.setOption(option) //通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartFour
}
cakeChart.push(chartObj) //通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartFour.resize(); //图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.cakeStyle {
width: 100%;
height: 90%;
}
</style>
4.环形饼状图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="leftCen">
<div id="emptyChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getIMJcxq} from '@api/screen' //引入的接口文件
const emptyChart = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
upperCenLeft: [], //图表数据
}
},
mounted() {
this.emptyEcharts(); //定义一个图表方法在methods中调用
this.getIMJcxq(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getIMJcxq() {
//请求接口
getIMJcxq({}).then(res => {
//请求成功通过返回数据进行赋值
this.upperCenLeft = res.data.pieData
this.emptyEcharts() //一定要调用图表的方法
})
},
//图表方法
emptyEcharts() {
//获取id并初始化图表
let emptyVariable = document.getElementById("emptyChart");
let myChartSix = this.$echarts.init(emptyVariable);
let option = {
color: ["rgb(54,190,255)", "rgb(66,245,214)"], //图表颜色
legend: {//顶部标题
top: '5%',//距离顶部5%
left: 'center'//居中
},
tooltip: {//鼠标触摸显示值
show: true,
trigger: 'item',
formatter: "{b}:{c} ({d}%)",
},
series: [{
type: 'pie',
radius: ['44%', '65%'], //中间圆环的大小以及外面圆环的大小
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {//中间的文字
label: {
show: true,//显示
fontSize: '14',//文字大小
}
},
labelLine: {//指示线不显示
show: false
},
data: this.upperCenLeft.map(item => {//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
return {
value: item.value,
name: item.name
}
}),
}]
}
myChartSix.setOption(option)//通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartSix
}
emptyChart.push(chartObj)//通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartSix.resize();//图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.leftCen {
width: 100%;
height: 90%;
}
</style>
5.竖行比较柱状图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getLjlcqk} from '@api/screen' //引入的接口文件
const columnarChart = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
upperBoth: [], //x轴图表数据
upperhgData: [], //合格数据
upperbhgData: [], //不合格数据
}
},
mounted() {
this.columnarEcharts(); //定义一个图表方法在methods中调用
this.getLjlcqk(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getLjlcqk() {
//请求接口
getLjlcqk({}).then(res => {
//请求成功通过返回数据进行赋值
this.upperBoth = res.data.xData //x轴图表数据
this.upperhgData = res.data.hgData //合格数据
this.upperbhgData = res.data.bhgData //不合格数据
this.columnarEcharts() //一定要调用图表的方法
})
},
//图表方法
columnarEcharts() {
//获取id并初始化图表
let columnarVariable = document.getElementById("columnarChart");
let myChartTwo = this.$echarts.init(columnarVariable);
let option = {
color: ['rgb(40,135,193)', 'rgb(231,137,58)'], //图表颜色
legend: {
textStyle: { //设置标题颜色
color: 'white'
}
},
xAxis: {
type: 'category',
splitLine: { //不显示网格线
show: false
},
axisLine: { //x轴文字颜色
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
data: this.upperBoth && this.upperBoth.map(item => item), //拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
},
yAxis: {
axisLine: {
lineStyle: { //y轴文字颜色
color: "rgb(35, 208, 229)"
}
},
splitLine: { //不显示网格线
show: false
},
},
series: [{
name: '合格',
data: this.upperhgData && this.upperhgData.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
type: 'bar', //图表类型
barWidth: 12, //柱图宽度
},
{
name: '不合格',
data: this.upperbhgData && this.upperbhgData.map(item =>item), //拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
type: 'bar', //图表类型
barWidth: 12, //柱图宽度
}
]
}
myChartTwo.setOption(option) //通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartTwo
}
columnarChart.push(chartObj) //通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartTwo.resize(); //图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.columnarStyle {
width: 100%;
height: 90%;
}
</style>
6.折柱混合
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="cenRight">
<div id="foldBreadChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getIMJcxq} from '@api/screen' //引入的接口文件
const foldBreadChart = []//定义一个空数组用于将数据push到这里
export default {
data() {
return {
upperCenRightXData: [], //x轴底部文字数据
upperCenRightBar: [], //柱体数据
upperCenRightLine:[],//折线数据
}
},
mounted() {
this.foldBreadEcharts(); //定义一个图表方法在methods中调用
this.getIMJcxq(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getIMJcxq() {
//请求接口
getIMJcxq({}).then(res => {
//拿到接口返回的数据并赋值
this.upperCenRightXData = res.data.barData.XData //x轴底部文字数据
this.upperCenRightBar = res.data.barData.bar//柱体数据
this.upperCenRightLine = res.data.barData.line//折线数据
this.foldBreadEcharts()//一定要调用图表方法
})
},
//图表方法
foldBreadEcharts() {
// 获取图表id并初始化图表
let foldBreadVariable = document.getElementById("foldBreadChart");
let myChartSeven = this.$echarts.init(foldBreadVariable);
//配置项
let option = {
tooltip: {//鼠标移入显示数据详情
foratter: function (params) {
return params[0].name + params[0].seriesName + ":params[0].data"
}
},
legend: {//顶部标题
data: ['报修次数', '复检通过率'],
textStyle: {//顶部标题样式
color: 'white'//文字颜色
}
},
xAxis: [{//x轴
type: 'category',
axisLine: {
lineStyle: {//x轴文字颜色
color: "rgb(35, 208, 229)"
}
},
data: this.upperCenRightXData && this.upperCenRightXData.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
axisPointer: {
type: 'shadow',//类型
},
}],
yAxis: [{//y轴
type: 'value',
axisLine: {
lineStyle: {//y轴文字颜色
color: "rgb(35, 208, 229)"
}
},
splitLine: {//网格线隐藏
show: false
},
name: '（辆）',//顶部文字描述
min: 0,//左边y轴起始数值
max: 100,//左边y轴最大数值
interval: 20,//每次递增20
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
splitLine: {//网格线隐藏
show: false
},
axisLine: {
lineStyle: {//右边y轴颜色
color: "rgb(35, 208, 229)"
}
},
name: '（复检率%）',//右边顶部文字描述
min: 0,//右边y轴起始数值
max: 100,//右边y轴最大数值
interval: 20,//每次递增20
axisLabel: {
formatter: '{value}'
}
}
],
series: [{
name: '报修次数',//顶部标题
type: 'bar',//类型 柱状
color: ["rgb(35,208,229)"],//颜色
barWidth: 12,//柱体宽度
data: this.upperCenRightBar && this.upperCenRightBar.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
},
{
name: '复检通过率',//顶部标题
type: 'line',//类型 折线
color: ['rgb(211,126,59)'],//颜色
yAxisIndex: 1,//使用的x轴的 index，在单个图表实例中存在多个x轴的时候有用
data: this.upperCenRightLine && this.upperCenRightLine.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
}
]
}
myChartSeven.setOption(option)//通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartSeven
}
foldBreadChart.push(chartObj)//通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartSeven.resize();//图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.cenRight {
width: 100%;
height: 90%;
}
</style>
7.横向比较柱状图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="acrossStyle">
<div id="acrossChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getHbSyJylbh} from '@api/screen' //引入的接口文件
const acrossChart = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
dateTime: [], //顶部标题数据
chargeListX: [], //碳排放数据
chargeListY: [], //加油量数据
}
},
mounted() {
this.acrossEcharts(); //定义一个图表方法在methods中调用
this.getHbSyJylbh(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getHbSyJylbh() {
//请求接口
getHbSyJylbh({}).then(res => {
//拿到接口返回的数据并赋值
this.dateTime = res.data[0]//顶部标题数据
this.chargeListX = res.data[1]//碳排放数据
this.chargeListY = res.data[2]//加油量数据
this.acrossEcharts()//一定要调用图表方法
})
},
//图表方法
acrossEcharts() {
//获取图表id并初始化图表
let acrossVariable = document.getElementById("acrossChart");
let myChartFive = this.$echarts.init(acrossVariable);
//配置项
let option = {
color: ["rgb(28,90,144)", "rgb(41,148,149)"],//图标颜色
tooltip: {//鼠标触摸显示值
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
legend: {//标题样式
textStyle: {
color: 'white'
}
},
grid: {//修改图表的大小位置
left: '5%',
right: '6%',
bottom: '3%',
top: "20%",
containLabel: true
},
xAxis: {
type: 'value',
axisLine: { //x轴文字颜色
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//x轴网格线隐藏
show: false
}
},
yAxis: {
type: 'category',
data: ['加油量', '碳排放量'],
axisLine: { //y轴文字颜色
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
splitLine: {//y轴网格线隐藏
show: false
}
},
series: [{
name: this.dateTime[0] + "月",//顶部数据，拿到data中赋完值的数据赋值给name
type: 'bar',//类型 柱体
barWidth: 12,//柱子宽度
data: this.chargeListX && this.chargeListX.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
},
{
name: this.dateTime[1] + "月",//顶部数据，拿到data中赋完值的数据赋值给name
type: 'bar',//类型 柱体
barWidth: 12,//柱子宽度
data: this.chargeListY && this.chargeListY.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
}
]
}
myChartFive.setOption(option)//通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartFive
}
acrossChart.push(chartObj)//通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartFive.resize();//图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.acrossStyle {
width: 100%;
height: 90%;
}
</style>
8.雷达图
<template>
<!-- 用来放echarts图表的容器，一定要有宽高 -->
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import {getCarPhenonmenon} from '@api/screen' //引入的接口文件
const chartsRadar = [] //定义一个空数组用于将数据push到这里
export default {
data() {
return {
upperRadarX: [], //文本信息
upperRadarY: [], //雷达图数据
}
},
mounted() {
this.radarEcharts(); //定义一个图表方法在methods中调用
this.getCarPhenonmenon(); //定义一个接口方法在methods中调用
},
methods: {
//接口方法
getCarPhenonmenon() {
getCarPhenonmenon({}).then(res => {
this.upperRadarX = res.data.xData//文本信息
this.upperRadarY = res.data.yData//雷达图数据
this.radarEcharts()//一定要调用图表方法
})
},
//图表方法
radarEcharts() {
//获取图表id并初始化图表
let radarVariable = document.getElementById("radarChart");
let myChartOne = this.$echarts.init(radarVariable);
//配置项
let option = {
radar: [{
indicator: this.upperRadarX,//文本信息
center: ['49%', '50%'],//图表位置 水平 垂直
radius: 62,//圆角弧度
}],
series: [{
type: 'radar',//类型
tooltip: {//鼠标触摸显示值
trigger: 'item'
},
areaStyle: {},
color: ['rgb(211,125,50)'],//图表颜色
data: [{
value: this.upperRadarY && this.upperRadarY.map(item => item),//拿到上面data中定义的数组通过map方法循环遍历取值，最后赋值给图表中的data
}]
}]
}
myChartOne.setOption(option)//通过setOption()方法生成图表
const chartObj = {
name: 'week',
value: myChartOne
}
chartsRadar.push(chartObj)//通过push方法添加到最上面定义的数组中
window.addEventListener("resize", function () {
myChartOne.resize();//图表自适应的一个方法
});
},
}
}
</script>
<style scoped>
.columnarStyle {
width: 100%;
height: 90%;
}
</style>
三、echarts图表常用的配置项
经过上面的代码实例，相信你已经可以根据自己的需求来创建属于自己的echarts图表了，但是在使用echarts时避免不了要修改官方原有的图表，包括一些图表颜色呀、文字颜色呀、x/y轴的描述文字呀等等一系列想要修改的地方，那这个时候就需要对一些配置项进行调整以此来适用于我们自己的项目，下面是一些比较常用的配置，相信看完之后，你就可以设计一套自己的echarts图表啦。
1.修改图表标题的颜色
主要通过legend中定义的textStyle修改即可。
let option = {
legend: {
textStyle: {
color: 'white'
}
},
}
2.修改折线图x/y轴颜色
在x/y轴中添加axisLine配置项进行修改即可。
let option = {
xAxis: {
//这是x轴文字颜色
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)"
}
},
},
yAxis: {
//这是y轴文字颜色
axisLine: {
lineStyle: {
color: "rgb(35, 208, 229)",
}
},
},
}
3.修改图表默认的颜色
直接在option中添加color配置项即可。
let option = {
color: ['rgb(40,135,193)', 'rgb(231,137,58)'],
}
4.在图表x/y轴添加描述文本
在想要添加的x/y轴加一个name属性即可。
let option = {
yAxis: {
name: "（万辆）",
},
}
5.去掉图表背景的网格线
在想要去掉网格线的地方添加一个splitLine属性将里面的show设置为false值即可。
let option = {
xAxis: {
splitLine: {
show: false
}
},
}
默认情况下
修改后
6.设置柱状图表柱子的宽度
在series中加上barWidth属性设置需要的值即可。
let option = {
series: [
{type: 'bar', barWidth: 12,}，
{type: 'bar', barWidth: 12,}
]
}
默认情况下
修改后
7.设置x/y轴文字的倾斜
在需要倾斜的x/y轴中加上axisLabel属性设置需要的角度值即可。
let option = {
xAxis: {
axisLabel: {
interval: 0,
rotate: 40,//倾斜度数
},
},
}
8.鼠标触摸饼图显示值且饼图中间显示对应的项
直接在option中加一个tooltip配置项，在里面进行配置即可。
let option = {
tooltip: {
show: true,//显示
trigger: 'item',//数据
formatter: "{b}:{c} ({d}%)",//b相当于对应的项，c就是值，d是占百分比
},
}
9.饼图展示信息让其值以及百分比都展示
在series配置中加上itemStyle配置项根据需要显示即可。
let option = {
series: [
itemStyle: {
normal: {
label: {
show: true, //显示
formatter: '{b} : {c} ({d}%)', //b:名称；c：值；d：所占百分比
},
labelLine: {
show: true, //显示
}
}
},
]
}
默认情况下
修改后
10.柱状图调整图表与顶部标题之间的距离
直接在option中添加grid配置项根据自己需要调整即可。
let option = {
grid: {
left: '5%',
right: '6%',
bottom: '3%',
top: "20%",
containLabel: true
},
}
11.饼图中间添加文字描述
直接在option下面加上需要的文字即可。
let option = {
title: {
text: "86.5%", //值
left: "center", //居中
top: "50%", //距离顶部50%
textStyle: { //文字样式
color: "rgb(30,30,30)", //文字颜色
fontSize: 16, //文字大小
align: "center" //居中
}
},
graphic: {
type: "text", //类型
left: "center", //居中
top: "40%", //距离顶部40%
style: {
text: "处罚率", //值
textAlign: "center", //居中
fontSize: 16, //字体大小
}
},
}
12.饼图指示线
在series配置项中加上labelLine设置其true或者false即可。
let option = {
series: [{
labelLine: {//指示线不显示
show: false
},
}]
}
13.图表宽高自适应
主要是通过resize()方法实现，在图表容器的外面再套一层div，然后给图表的div宽高都设置成100%，给外面的div设置宽高即可。
<div class="columnarStyle">
<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>
js
radarEcharts() {
let radarVariable = document.getElementById("radarChart"); //获取id
let myChartOne = this.$echarts.init(radarVariable); //初始化图表
let option = { //配置项
......
}
window.addEventListener("resize", function () {
myChartOne.resize(); //myChartOne就是上面初始化定义的值
});
}
14.调整饼状图与标题之间的距离
直接在option中的legend属性中设置top的值即可。
let option = {
legend: {
top: '0%',
left: 'center'
},
}
15.把柱状图改成圆形展示
直接在option中加上itemStyle配置项设置其弧度即可。
let option = {
itemStyle:{
barBorderRadius:[20,20,0,0]//依次为上左上右下右下左的值
}
},
此文章持续更新中…
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码
https://www.bilibili.com/video/BV1sR4y1t749?spm_id_from=333.999.0.0