1，有关echarts引用的相关报错直接写这句  import * as echarts from 'echarts'

2，折线图

chartsObj = {
tooltip: {
trigger: 'axis',
axisPointer: {
type:'none', // 默认为line，不关闭会有引线跟随
},
formatter(params:any) { //自定义提示框，可打印params查看
let str = ''
params.forEach((item:any)=>{
str += `${item.name}

`
})
return (str);
},
},
grid: {
top: '5%',
left: '1%',
right: '2.5%',
bottom: '5%',
containLabel: true // 区域自适应
},
xAxis: {
type: 'category',
axisTick: { // 是否显示刻度线
show: false
},
boundaryGap: false, // 不留白，从原点开始
axisLine: { //横坐标横线线条
lineStyle: {
type: 'solid',
color: '#ccc',
}
},
axisLabel: { // 横坐标字体
textStyle: {
color: '#4D5059 '
}
},
splitLine: { // 横坐标上方线条显示及颜色
show:true,
lineStyle : {
color: '#cccc',
type: 'dashed'
}
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show:true,
lineStyle: {
type: 'solid',
color: '#ccc',
}
},
axisLabel: { // y轴文字设置
textStyle: {
color: '#4D5059 '
},
lineStyle: {
color: '#F2F4F7',
}
},
splitLine: {
lineStyle : {
color: '#cccc',
type: 'dashed'
}
}
},
series: [
{
data: [],
type: 'line',
symbol:'circle',
smooth:true,
symbolSize:10,//拐点大小
itemStyle: {
normal: {
color: '#FF8543', //改变折线点的颜色
lineStyle: {
color: '#FF8543' //改变折线颜色
}
}
},
areaStyle: { // 区域渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: .2,
color: 'rgba(255,133,67,0.16)'
}, {
offset: .8,
color: 'rgba(66, 133, 244, 0)'
}])
}
},
showSymbol: false, // 是否展示折线上的圆点默认
}
]
}

　3，饼图　

chartsObj ={
title: {
textStyle: {
fontFamily: 'PingFangSC-Medium, sans-serif',
fontWeight: 500,
fontSize: 14
},
bottom: '15%',
left: '40%'
},
legend: {
right:10,
top:10,
orient : 'vertical',
icon: "circle",
type: "scroll", // 是否开启切换图例分页
itemWidth: 12, // 图例标记的图形宽度。
itemHeight: 12, // 图例标记的图形高度。
width: 'auto', // 图例组件的宽度
height: 'auto', // 图例组件的高度
},
tooltip: {
// trigger: 'item',
formatter(item:any) {
let str = ''
str += `${item.name}

`
return str;
}
},
series: [
{
type: 'pie',
bottom: '20%',
radius: ['60%', '90%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
},
},
data: [],
color:['#F5222D', '#FF8543', '#FFBB00', '#4285F4']
}
]
}