Vue中引入echarts的步骤及折线图、柱状图常见配置项
作者：仰望仰望
这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下
一、安装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%',
到此这篇关于Vue中引入echarts的步骤及折线图、柱状图常见配置项的文章就介绍到这了,更多相关Vue中引入echarts的步骤及常见配置项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！