Vue中引入echarts的步骤及折线图、柱状图常见配置项

npm i echarts

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

import * as echarts from "echarts";

<div ref="chart"></div>

<script>
import * as echarts from "echarts";
export default {
name: 'MyData',
data() {
return {

};
},
mounted() {
this.echartsInit();
},
methods: {
echartsInit() {

}
},
};
</script>

methods: {
echartsInit() {
//初始化容器
const myChart = echarts.init(this.$refs.pro_chart); 
const option = {这里面就是图表的各种配置项，从官方文档搞下来}; 
}
},

echartsInit() {
const myChart = echarts.init(this.$refs.chart); //初始化容器
const option = {这里面就是图表的各种配置项，从官方文档搞下来};
myChart.setOption(option);
}

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],
},
]
};

option = {
//图例
legend: {
x: 'center',
y: 'bottom',
padding: [10, 0, 3, 0],
textStyle: { //图例的字体样式
color: '#fff',
},
data: ['类目A', '类目B']
},
//在容器中的位置
grid: {
left: '2%',
right: '3%',