一、场景
2020年写一个app,首页有个echarts折线图,当时package.json版本是4.8.0,我接手继续写,拉取项目后安装依赖,echarts老是提示安装不是,我当时就npm install echart --save,就安装一个高版本的,然后就报错了,提示echarts两个模块没有找到grid和legend
二、项目代码
echarts图表中的确也用了grid和legend,低版本4.8.0没引入也不会报错,高版本5.1.2如果没有引入就会报错,最后我把echarts给回退到4.8.0版本,不引人这两行也不会报错了,气死了
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
//下面两行是高版本需要加的
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
let lineOption = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderColor: '#eaeaea',
borderWidth: 1,
textStyle: {
fontSize: 12,
color: '#616161',
borderColor: '#e7e7e7',
borderWidth: 1,
textBorderWidth: 2,
textBorderColor: '#e7e7e7',
},
axisPointer: {
type: 'line',
lineStyle: {
color: '#409EFF',
},
},
},
grid: {
//上下左右位移设置
top: '15',
left: '50',
right: '30',
},
legend: {
//orient: 'vertical',
bottom: '40',
left: 'center',
itemHeight: 5,
//icon: 'rect',
//align: 'bottom',
textStyle: {
color: '#616161',
fontSize: 14,
},
},
xAxis: {
boundaryGap: false,
// data: [],
axisLine: {
lineStyle: {
color: '#eaeaea',
},
},
axisTick: {
show: false,
},
axisLabel: {
color: '#616161',
},
splitLine: {
show: false,
},
},
yAxis: {
axisLine: {
//y轴线
show: false,
},
axisTick: {
//y轴刻度
show: false,
},
axisLabel: {
//y轴文字颜色
color: '#616161',
},
splitLine: {
//y轴分割线(横向)
lineStyle: {
color: '#eaeaea',
type: 'dotted',
},
},
type: 'value',
},
series: [
{
type: 'line',
// data: [],
itemStyle: {
//
color: '#409EFF',
},
lineStyle: {
//折线图样式
width: 1,
},
showSymbol: false, //是否显示拐点
areaStyle: {
//折线图区域设置
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#FFFFFF',
},
{
offset: 1,
color: '#409EFF',
},
]),
},
},
},
],
}
三、总结
安装依赖时候,如果老是安装不上就把node_modules删了重新npm i多试试
如果没有需求,千万不要给已经写过不少内容的项目升级版本,容易出bug
报应啊,因为这个我多加班一个小时,第二天又研究了大半天…