当前位置: 代码迷 >> 综合 >> echarts 图例动态展示
  详细解决方案

echarts 图例动态展示

热度:90   发布时间:2023-11-18 14:28:26.0

 

 

// html 部分
<div class="left7_factor"><div class="selectBox2"><el-selectv-model="type7"class="mySelect"popper-class="mySelectPopper"placeholder="请选择"style="width: 236px;"><el-optionv-for="(item, i) in factor1":key="i":label="item.label":value="item.value"></el-option></el-select></div></div>
<div id="echartone" style="width: 810px;height: 550px;"></div>// js部分
echarts.init(document.getElementById("echartone")).setOption({color: ["#ee4646", "#2872f9", "#14ecc2", "#fecb25", "#80FFA5"],title: {// text: 'Stacked Line'},tooltip: {trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#88b1d0"}},textStyle: {fontSize: 20}},legend: {right: "100",textStyle: {color: "#88b1d0",fontSize: 36},// 主要控制图例代码data: this.type7 == 1 ? ["全年达标线", "总磷"] : ["全年达标线", "氨氮"],selected: {总磷: this.type7 == 1 ? true : false,氨氮: this.type7 == 1 ? false : true}},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},xAxis: {type: "category",boundaryGap: false,axisLabel: {fontSize: 24,color: "#88b1d0"},data:['2月','4月','6月','8月','10月','12月']},yAxis: {type: "value",max: this.type7 == 1 ? 1 : 5,axisLine: {//坐标轴轴线相关设置。数学上的x轴show: true,lineStyle: {color: "#28344e"}},axisLabel: {fontSize: 24,color: "#88b1d0"},splitLine: {show: true,lineStyle: {color: "#28344e"}}},series: [{name: "全年达标线",type: "line",symbol: "none",data:this.type7 == "1" ? [0.4, 0.4, 0.4, 0.4, 0.4,0.4] : [2, 2, 2, 2, 2, 2]},{name: "总磷",type: "line",symbol: "none",data: [0.3, 0.5, 0.5, 0.9, 0.8, 0.3]},{name: "氨氮",type: "line",symbol: "none",data: [0.6, 2.5, 1.2, 0.2, 2.8, 1.3]}]},true);

  相关解决方案