<div id="main2" style="width: 100%; height: 340px"></div>
main2() {
let main2 = echarts.init(document.getElementById("main2"));
main2.setOption({
legend: {
text: ["峰时", "平时", "谷时"],
textStyle: {
color: "#fff", //legend字体颜色
},
},
grid: {
top: 25,
left: 75,
bottom: 20,
//top:4,
// x: 50,
// y2: 30
},
tooltip: {
trigger: "axis",
position: function (pt) {
return [pt[0], "10%"];
},
},
lineStyle: {
normal: {
color: "#32A8FF",
},
},
xAxis: {
boundaryGap: false,
type: "category",
// data: this.xAxisData2,
data: ["08月", "09月", "10月", "11月"],
axisLabel: {
textStyle: {
color: "#fff",
},
},
axisLine: {
lineStyle: {
color: "#0ec2c1",
width: 2,
},
},
axisTick: {
show: true,
},
},
yAxis: {
splitNumber: 3,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
//// y轴的颜色和宽度
axisLine: {
lineStyle: {
color: "#0ec2c1",
width: 2,
},
},
splitLine: {
lineStyle: {
color: ["#074545"],
type: "dashed",
},
},
},
series: [
{
name: "峰时",
type: "line",
// data: this.seriesData2,
data: [10, 6, 8, 5],
areaStyle: { type: "default" },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(216,129,152,1)",
},
{
offset: 0.5,
color: "rgba(216,129,152,.5)",
},
{
offset: 1,
color: "rgba(216,129,152,0)",
},
]),
},
},
{
name: "平时",
type: "line",
// data: this.seriesData2,
data: [10, 6, 8, 5],
areaStyle: { type: "default" },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(88,213,194,1)",
},
{
offset: 0.5,
color: "rgba(88,213,194,.5)",
},
{
offset: 1,
color: "rgba(88,213,194,0)",
},
]),
},
},
{
name: "谷时",
type: "line",
// data: this.seriesData2,
data: [10, 6, 8, 5],
areaStyle: { type: "default" },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(206,228,98,1)",
},
{
offset: 0.5,
color: "rgba(206,228,98,.5)",
},
{
offset: 1,
color: "rgba(206,228,98,0)",
},
]),
},
},
],
// color:
});
},
看一下main2 div 的父级的宽度是多少,设置了main2的宽度为100%,宽度为父级的宽度的100%。