echarts实现折线面积图

港控/mmm° 2022-01-12 02:43 729阅读 0赞

var option4 = {
      // legend: {
      //   data: ['吃饭', '睡觉', '打豆豆'],
      //   icon: 'rect',
      //   top: 22,
      //   right: 24,
      //   itemGap: 15,
      //   itemWidth: 10,
      //   itemHeight: 10,
      //   textStyle: {
      //     // padding: [0, 0, 0, 5],
      //     color: 'rgba(0,0,0,0.87)'
      //   }
      // },
      color: ['#289df5', '#fbc01b', '#ff5050'],
      grid: {
        left: '4%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        // borderWidth:'0',
        borderColor:'#85b3f1',
        backgroundColor:'rgba(133,179,241,1)',//通过设置rgba调节背景颜色与透明度
        axisPointer: {
          animation: false
        },
        formatter: function (params) {
          var htmlStr = '';
          htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span>';
          for(var i=0;i<params.length;i++){
            htmlStr += '：<span style="color:#fff;">' + params[i].value + ' </span><br/>';
          }
          htmlStr += '</div>';
          return  htmlStr
        },
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: "#a6abab" // y坐标轴的轴线颜色
          }
        },
        axisTick: {
          length: 0
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#bdbdbd'
          }
        },
        // name: '(机台号)',
        // nameTextStyle: {
        //   padding: [10, 0, 0, 0],
        //   color: '#bdbdbd'
        // },
        nameGap: 0,
        data: this.OEEX
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: "#a6abab" // y坐标轴的轴线颜色
          }
        },
        axisTick: {
          length: 0 // 刻度线的长度
        },
        splitLine: {//y轴的网格
          lineStyle: {
            color: ["#eee"],
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#a3a4b2'
          }
        }
      },
      series: [{
        name: '工艺1',
        type: 'line',
        smooth: true,
        symbol: 'circle', // 拐点类型
        symbolSize: 0, // 拐点圆的大小
        itemStyle: {
          normal: {
            color: '#6da4ef', // 折线条的颜色
            borderColor: '#6da4ef', // 拐点边框颜色
            areaStyle: {
              type: 'default',
              opacity: 0.1
            }
          }
        },
        data:this.OEEY
      }]
    };
    this.chart4 = this.echarts.init(document.getElementById("chart4")); //定义
    this.chart4.clear();
    this.chart4.setOption(option4); //展示复制代码

转载于:https://juejin.im/post/5cf739ccf265da1b6a3482ac

发表评论取消回复

表情：

评论列表（有 0 条评论，729人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 设置面积区域图（areaStyle核心）

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第011个 [点击查看专栏目录][Link 1]

红太狼/ 2024年03月27日 16:24/ 0 赞/ 79 阅读

相关 echart 折线图 ---- 坐标轴、网格、折线配置

代码如下： var orderNumChart; function loaOrderNumChart() { var option = {

╰半夏微凉°/ 2023年06月07日 03:19/ 0 赞/ 2 阅读

相关 Echarts 折线图实现多条折线

官方例子：[Examples - Apache ECharts (incubating)][Examples - Apache ECharts _incubating] 官方

妖狐艹你老母/ 2022年12月25日 00:51/ 0 赞/ 332 阅读

相关 echarts监听折线柱图切换的方法

> 监控图例切换的方法，折线图和柱状图切换，想要监控切换时，改变些许参数。 var option = { ...,

àì夳堔傛蜴生んèń/ 2022年12月05日 13:48/ 0 赞/ 174 阅读

相关 vue+ts+echarts :画折线和柱状图的组合

直接上代码了安装步骤之前已经写过了。 template部分 <v-chart :option="histogramOption"

叁歲伎倆/ 2022年11月19日 04:19/ 0 赞/ 188 阅读

相关 echarts教程（二）：修改echarts面积图修改样式

https://echarts.apache.org/zh/option.html\series-line.areaStyle echarts 的面积图其实是线形图添加`ar

约定不等于承诺〃/ 2022年10月29日 15:23/ 0 赞/ 608 阅读

相关【echarts折线图】详解一、折线效果 && 折线点效果

备忘：关于折线图的数据折线显示更多配置： https://echarts.baidu.com/option.html\series-line <script>

迷南。/ 2022年02月03日 12:39/ 0 赞/ 718 阅读

相关 echarts实现折线面积图

var option4 = { // legend: { // data: ['吃饭', '睡觉', '打豆豆'], //

港控/mmm°/ 2022年01月12日 02:43/ 0 赞/ 730 阅读

相关 echart 大量数据面积图

![Center][] var base = +new Date(1968, 9, 3); var oneDay = 24 3600 1000;

川长思鸟来/ 2021年10月08日 06:34/ 0 赞/ 660 阅读

相关 ECharts3实例定制图例、XY轴、折线柱状混合图

前言实现如下效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

矫情吗；*/ 2021年07月26日 11:01/ 0 赞/ 429 阅读