小程序echarts实现上下限展示，并插入文字

Deng.994

已于 2023-10-08 10:04:53 修改

阅读量291

点赞数

分类专栏： echarts 文章标签：前端 echarts 微信小程序

于 2023-09-15 14:56:58 首次发布

本文链接：https://blog.csdn.net/weixin_55688275/article/details/132902224

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'cross',
          label: {
              backgroundColor: '#6a7985'
          }
      }
  },
    graphic:{
      type: "text",
      z:10,
      left: '15%',
			top: '16%',
      style: {
         text: ["底层模型1","底层模型2", "底层模型3", "底层模型4"].join("\n"),
         fill: "#435978",
         font: '12px "STHeiti", sans-serif',
				 lineHeight: 18,
				 opacity: 0.8
      }
    },
    legend: {
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['2023-09-09', '2023-09-10', '2023-09-11', '2023-09-12', '2023-09-13', '2023-09-14', '2023-09-15']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '上限',
            type: 'line',
            data: [ , ,160 ,170, 175,201, 210,190, 330, 310],
            smooth:true,
            stack: 'Total',
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#778aff'
									}, {
                    offset: 1,
										color: '#FFFFFF'
									}],
									global: false
								},
								opacity: 1
							},
							symbol: 'none',
        },
        {
          name: '下限',
          type: 'line',
           data: [ , , 50 ,60, 32,40, 34,90, 30, 10],
            symbol: 'none',
            smooth:true
      }, 
        {
            name: '平均值',
            type: 'line',
            data: [200,150,120, 132, 101, 134, 90, 230, 210],
            symbol: 'none',
            smooth:true
        }
    ]
};