zoukankan      html  css  js  c++  java
  • Echarts的详细描述

     

    option = {
    
    //标题
    
              title: {
    
          text: title,
          //标题样式
          textStyle: {
             fontWeight: 'normal',
             color: '#fff',
              },
          },
    //网格线,图跟边框的距离
    grid:{
        left: '4%',
        right: '5%',
        bottom: '6%',
        top:'5%',
        containLabel: true
    },
        xAxis: {
          type: 'category',
          //x轴字体颜色
          axisLine: {
          lineStyle: {
          color: '#fff'
              }
            },
           data: ['0822','0823','0824','0826','0827','0828']
          },
        yAxis: {
           type: 'value',
           //y轴颜色
           axisLine: {
             lineStyle: {
               color: '#fff'
               }
              },
           //y轴设置为百分比
           axisLabel: {
                formatter: '{value}%',
            },
           //坐标轴内线的样式
           splitLine: {
             lineStyle: {
               color: '#666',
               //type:'dashed'虚线
              }
            }
             },
           series: [{
             //折线上数字
             label: {
              normal: {
                   show: true,
                   position: 'top',
                   formatter:'{c}%'
                  }
              },
             // 折线颜色
             itemStyle: {
                  normal: {
                 color: '#33CCFF',
                 lineStyle: {
                   color: '#33CCFF'
                     }
                   }
             },
               data:['78.57','50','80','93.33','92.86','100'],
               type: 'line',
               smooth: true,
                                  //带箭头的平均值
                                  markLine : {
                                          // symbol:'none',/*去掉箭头
                                        data : [
                                                {type : 'average', name: '平均值'}
                                ],
                                        lineStyle:{
                                        color:'#FFCC01'
                                     }
                               },
    itemStyle: {
        normal: {
            // 颜色渐变
            color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#2f7ea4'},
                    {offset: 0.5, color: '#2e6096'},
                    {offset: 1, color: '#234362'},
                ]
            )
        },
    },
           }]
         };
          myChart.setOption(option);
       }     
       }
    

      

  • 相关阅读:
    linux脚本mysql服务与keepalived服务高可用脚本
    linux脚本启动服务脚本
    linux脚本数据库备份脚本
    linux脚本清理日志文件脚本
    最大数字
    求阶乘
    素数
    水仙花数
    js基础1
    css常用属性2
  • 原文地址:https://www.cnblogs.com/keai/p/11056696.html
Copyright © 2011-2022 走看看