一、安装echarts
二、引入echarts
1、全局引入
2、局部引入
三、使用
一、安装echarts
npm i echarts
二、引入echarts
1.全局引入
在main.js文件中
//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;
二、局部引入
import * as echarts from "echarts";
三、在vue中使用echarts
1、准备一个容器放置，并且配置ref属性
<div ref="chart"></div>
2、将其封装成一个函数，并在初次挂载时调用
<script>
import * as echarts from "echarts";
export default {
name: 'MyData',
data() {
return {
};
},
mounted() {
this.echartsInit();
},
methods: {
echartsInit() {
}
},
};
</script>
3、初始化（init函数），调节配置项
methods: {
echartsInit() {
//初始化容器
const myChart = echarts.init(this.$refs.pro_chart);
const option = {这里面就是图表的各种配置项，从官方文档搞下来};
}
},
4、将配置项放入容器
echartsInit() {
const myChart = echarts.init(this.$refs.chart); //初始化容器
const option = {这里面就是图表的各种配置项，从官方文档搞下来};
myChart.setOption(option);
}
四、常见配置项
1.折线图
option = {
title: {
text: '标题'
},
//图例的相关设置
legend: {
x:'center', //水平位置
y:'bottom', //垂直方向位置
padding: [10,0,0,0], //上右下左距离
itemWidth: 30, //图例宽
itemHeight: 30, //图例高
textStyle: { //图例的字体样式
fontSize: 26,
color: '#666',
},
data: ['类目1', '类目2'], //图例名字，要和数据的name对应
},
//这是鼠标移到某个数据上显示的面板配置
tooltip: {
trigger: 'item',
triggerOn: 'click',
axisPointer: {
type: 'none'
},
formatter: function () {
return '17.5KG'
}
},
//这是一些工具，比如下面这个saveAsImage是保存为图片的选项
toolbox: {
show: false,
feature: {
saveAsImage: {}
}
},
//图的距离
grid: {
left: '3%',
right: '4%',
bottom: '5%',
top: '5%',
containLabel: true
},
//x轴相关配置
xAxis: {
type: 'category',
boundaryGap: false, //坐标值是展示在小头头上还是展示在头头之间，你懂的
axisLabel: {
//设置x轴的展示间隔
interval: 0,
//x轴坐标文字换行
formatter: function (value, index) {
var num = 5; //每行显示字数
var str = "";
var valLength = value.length; //该项x轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
},
//刻度相关配置：
axisTick: {
show: false,//去掉刻度
},
//轴线相关配置：
axisLine: {
show: false, //去掉y轴的线
lineStyle: {color: '#ccc'}, //设置轴线颜色
},
// prettier-ignore
data: ['1','1''1''1''1''1''1''1']
},
yAxis: {
type: 'value',
//隐藏y轴的横线
splitLine: {
show: false
},
//设置y轴的初始值和结束值
min: '20',
max: '24.5',
splitNumber: 9, //设置y轴的间隔
axisLabel: {
formatter: function (value) {
//保留一位小数并且加上单位
return value.toFixed(1) + ' °C';
}
},
axisPointer: {
snap: true
},
//刻度相关配置：
axisTick: {
show: false,//去掉刻度
},
//轴线相关配置：
axisLine: {
show: false, //去掉y轴的线
lineStyle: {color: '#ccc'}, //设置轴线颜色
},
},
series: [
{
name: '类目1',
type: 'line',
lineStyle: {
color: 'rgb(118, 162, 255, 1)', //改变折线颜色
normal: {
opacity: 0, //透明度，0隐藏1显示
}
},
showSymbol: true, //显示隐藏小圆点
itemStyle: {
color: 'RGBA(118, 162, 255, 1)', //小圆点的颜色
},
showBackground: true, //是否展示背景
backgroundStyle: {
color: 'RGBA(255, 228, 218, 1)' //背景色
},
smooth: true, //数据是否平滑连接
data: [21.1, 22.1, 23.5, 23.2, 22.5, 23.2, 22.1],
},
{
name: '类目2',
type: 'line',
lineStyle: {
color: 'rgb(63, 207, 153, 1)', //改变折线颜色
normal: {
opacity: 1, //透明度，0隐藏1显示
}
},
showSymbol: true, //显示隐藏折线上的小圆点
itemStyle: {
color: 'RGBA(63, 207, 153, 1)'
},
smooth: true,//数据是否平滑连接
data: [21.3, 22.8, 22.5, 23.6, 21.5, 23.2, 21.1],
},
]
};
2.柱状图
option = {
//图例
legend: {
x: 'center',
y: 'bottom',
padding: [10, 0, 3, 0],
textStyle: { //图例的字体样式
color: '#fff',
},
data: ['类目A', '类目B']
},
//在容器中的位置
grid: {
left: '2%',
right: '3%',
bottom: '10%',
top: '5%',
containLabel: true
},
//悬浮卡片
tooltip: {
trigger: 'axis', //坐标轴触发
triggerOn: 'click', //点击显示卡片
axisPointer: {
type: 'none'
},
formatter: function () {
return '奥里给' //自定义悬浮卡片显示的数值
}
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
//去掉最下面的头头
axisTick: {
show: false
},
//刻度相关配置：
axisTick: {
show: false,//去掉刻度
},
//轴线相关配置：
axisLine: {
show: false, //去掉y轴的线
},
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function (value) {
//保留一位小数并且加上单位
return value + 'KG';
}
},
//隐藏y轴的横线
splitLine: {
show: false
},
//设置y轴的初始值和结束值
min: '10',
max: '19',
splitNumber: 9, //设置y轴的间隔
//刻度相关配置：
axisTick: {
show: false,//去掉刻度
alignWithLabel: true, //刻度和值居中对齐
},
//轴线相关配置：
axisLine: {
show: false, //去掉y轴的线
},
},
series: [
{
name: '类目A',
data: [12, 15, 15, 13, 17, 14, 13, 15, 13, 17, 14, 16],
type: 'bar',
barGap: '10%', //设置柱子间隔
itemStyle: {
//设置渐变色
opacity: 1, //透明度0隐藏，1显示
barBorderRadius: [25, 25, 0, 0], //顶部的圆角弧度
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#73A2FF' }, //渐变上面
{ offset: 1, color: '#11AFFA' } //渐变下面
])
},
showBackground: true,//是否展示背景并设置颜色
backgroundStyle: {
color: 'RGBA(255, 228, 218, 1)'
}
},
{
name: '类目B',
data: [14, 17, 14, 13, 17, 14, 15, 17, 14, 13, 17, 12],
type: 'bar',
itemStyle: {
opacity: 1,
barBorderRadius: [25, 25, 0, 0],//顶部的圆角弧度
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#3FCF98' },
{ offset: 1, color: '#10CEF0' }
])
},
showBackground: false, //是否展示背景
},
]
};
