一、使用步骤
1.引入 echarts
（1）在script引入
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
（2）命令引入
npm i echarts
//或者
yarn add echarts
在main.js全局引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.准备一个具备大小的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化 echarts 实例对象
//this.$echarts.init(document.getElementById('main')).dispose(); //销毁前一个实例
var myChart = this.$echarts.init(document.getElementById('main'))
4.指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}
]
}
5.将配置项设置给 echarts 实例对象
myChart.setOption(option)
二、Echarts-基础配置
需要了解的主要配置title legend tooltip grid color xAxis yAxis series
title：标题组件，包含主标题和副标题
legend：图例组件,展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示
tooltip：提示框组件
grid：直角坐标系内绘图网格
color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series:系列列表。每个系列通过 type 决定自己的图表类型，bar:柱状图，line:折线图
三、柱状图图表根据需求定制
title图表标题配置
- 居中显示标题和副标.
如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐 - 在
textStyle标题字体18px颜色为#617be3
title: {
text: '标题',
subtext: '副标题', //副标题
left: 'center',
top: '10px',
bottom:'auto',
textStyle: {
fontSize: 18,
color: '#617be3'
}
},
legend图例配置
- 更改图例文字大小颜色以及位置
legend: {
// 距离容器10%
right: "10%",
// 修饰图例文字的颜色
textStyle: {
color: "#4c9bfd",
fontSize: "12"
}
// data: ["旅游行业", "游戏行业"] // 如果series 里面设置了name，此时图例组件的data可以省略
},
tooltip提示框配置
- 悬浮显示当前柱子数据
//trigger:可选item:数据项图形触发（散点图，饼图） || axis:坐标轴触发（柱状图，折线图） || none:什么都不触发
tooltip: {
trigger: 'axis',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
formatter: '{c}', //折线图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
axisPointer: {
type: 'shadow', //line:直线指示器 || shadow:阴影指示器 || none 无指示器 || cross 十字准星指示器
}
},
grid绘图网格配置
- 修改图表柱形颜色
#2f89cf - 修改图表大小
top 为 10px bottom 为 4%.grid 决定我们的柱状图的大小
color: ["#2f89cf"],
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true //grid 区域是否包含坐标轴的刻度标签
},
color配置
//默认颜色表盘
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
X 轴相关设置 xAxis
- 文本颜色设置为
rgba(255,255,255,.6)字体大小为12px - X 轴线的样式 不显示
- 去掉x轴刻度
- 修饰刻度标签的颜色
// 设置x轴标签文字样式
// x轴的文字颜色和大小
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// 修饰刻度标签的颜色 //或者通过textStyle设置
axisLabel: {
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '12',
},
//标签竖着显示
formatter: function (val) {
return val.split("").join("\n")
},
// x轴样式设置
axisLine: {
show: false //显示或隐藏
// 如果想要设置单独的线条样式
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
}
},
// 刻度设置
axisTick: {
show: false // 去除刻度
},
//坐标轴两边留白策略
boundaryGap: true, //一般柱状图要留白 折线图不用
Y 轴相关定制yAxis
- 文本颜色设置为
rgba(255,255,255,.6)字体大小为12px - Y 轴线条样式 更改为 1 像素的
rgba(255,255,255,.1)边框 - 分隔线的颜色修饰为 1 像素的
rgba(255,255,255,.1)
// y 轴文字标签样式
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
// y轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
},
// y 轴分隔线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
series图标数据相关配置
- 修改柱子宽度
barWidth - 修改柱形为圆角
- 为每个柱子定义不同颜色且在柱子上方显示数据
series: [{
name: "直接访问",
type: "bar",
// 修改柱子宽度
barWidth: "35%",
data: [10, 52, 200, 334, 390, 330, 220],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5,
//定义柱子不同颜色
normal: {
color: function (params) {
var colorList = [
'#67C23A', '#B5C334', '#ffa41b', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex]
},
//显示柱子上方数据
label: {
show: true,
position: 'top',
formatter: '{b}:{c}' //折线图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
}
}
}
//折线图选项
//smooth: true,折线比较圆滑，平稳过渡
}]
更换对应数据
// x轴中更换data数据
data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据
data: [200, 300, 300, 900, 1500, 1200, 600]
让图表跟随屏幕自适应
window.addEventListener('resize', function() {
myChart.resize()
})
注意：
-
echarts初始化要在mounted中进行，等dom元素挂载完毕 - 若是使用
tab切换echarts，则使用watch监听tab变化同时用v-if重新渲染页面，并且可以销毁前一个echarts实例
this.$echarts.init(document.getElementById('main')).dispose() //销毁前一个echarts实例
watch: { // 监测变化
tabIndex(value) {
if (value == 0) {
this.$nextTick(() => {
this.drawLine()
})
} else if (value == 2) {
this.$nextTick(() => {
this.drawBar()
})
}
}
},
配置后
配置前
image.png
