<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:
});
},
echarts宽度是设置的百分百,怎么图表出来只有这么点了?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
悬赏问题
- ¥15 echarts动画效果失效的问题。官网下载的例子。
- ¥60 许可证msc licensing软件报错显示已有相同版本软件,但是下一步显示无法读取日志目录。
- ¥15 Attention is all you need 的代码运行
- ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
- ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
- ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
- ¥30 关于<main>标签页面跳转的问题
- ¥80 部署运行web自动化项目
- ¥15 腾讯云如何建立同一个项目中物模型之间的联系
- ¥30 VMware 云桌面水印如何添加