2022-4-6 前端达人
-
let myChart = this.$echarts.init(document.getElementById('plant-charts'));
-
// 绘制图表
-
myChart.setOption({
-
tooltip: {
-
formatter: '{c}' //设置单位
-
},
-
//图例样式
-
legend: {
-
data: ['宽带情况', '数据量'],
-
textStyle: {//图例文字的样式
-
color: '#fff',
-
fontSize: 12,
-
padding: [0, 20, 0, 0]
-
}
-
},
-
grid: { //设置图标距离父级div的间距
-
top: "10",
-
left: "0",
-
right: "15",
-
bottom: "10",
-
containLabel: true
-
},
-
xAxis: {
-
type: 'category',
-
boundaryGap: false,
-
data: ['2015','2016','2017','2018','2019','2020','2021'],
-
axisLabel: {
-
interval: '0', //类目轴(category)中用数值表示显示间隔，0为显示所有，1为隔一个显示一个，以此类推
-
textStyle: { //文字样式
-
color: '#62799C',
-
fontSize: '12'
-
},
-
},
-
-
axisTick: { //y轴刻度线不显示
-
show: false
-
},
-
},
-
yAxis: {
-
type: 'value',
-
//show: false,
-
axisLabel: {
-
textStyle: { //文字样式
-
color: '#62799C',
-
fontSize: '12'
-
},
-
-
},
-
// 控制网格线
-
splitLine: {
-
// 改变轴线颜色
-
lineStyle: {
-
color: '#2a2a2d'
-
}
-
},
-
axisTick: { //y轴刻度线
-
show: false
-
},
-
},
-
series: [{
-
data: [5000,6000,7000,4400,3200,4500,6800],
-
type: 'line',
-
itemStyle: {
-
normal: {
-
color: 'rgba(62,139,222,1)'//线颜色
-
}
-
},
-
areaStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
-
offset: 0,
-
color: 'rgba(62,139,222,0.6)'
-
}, {
-
offset: 1,
-
color: 'rgba(62,139,222,0.01)'
-
}])
-
}
-
},
-
}]
-
});
-
蓝蓝设计的小编 http://www.lanlanwork.com