zoukankan      html  css  js  c++  java
  • echart的编辑

    1. 做echart最好的方法,从需求出发,查看文档配置项。一边查阅,一边实现功能。一些特殊功能实现,就另说了。
    <div class="upshow_left" id="seven_day_chart" style="60vw;height:38vh;"></div>
    
    
    console.log(echarts +"我的图表对象");
       var seven_day_chart = echarts.init(document.getElementById('seven_day_chart'));
       //配置图表配置项
       var option_1 = {
           title:{
               text:"近7日作业情况",
               textStyle:{
                   color:'#FFFFFF',
                   fontSize:20,
               },
               padding:[
                   20,0,0,60
               ]
           },
           legend: {
               type:'plain',
               top:"20%",
               right:"0",
               orient:"vertical",
               textStyle:{
                   color:'#FFFFFF',
               },
               itemGap:10,
           },
           tooltip: {},
           //假数据
           dataset: {
               source: [
                   ['product', '异常作业', '成功作业', '中断作业'],
                   ['2019-04-11', 100, 200, 200],
                   ['2019-04-12', 200, 300, 100],
                   ['2019-04-13', 200, 400, 450],
                   ['2019-04-14', 100, 300, 300]
               ]
           },
           xAxis: {
               type: 'category',
               name:"时间",
               nameTextStyle:{
                   color:"#8A8F97",
                   fontSize:'14',
               },
               //去掉刻度
               axisTick: {
                   show: false
               },
               axisLabel:{
                   color:"#8A8F97",
                   fontSize:'14',
               },
               axisLine:{
                   lineStyle:{
                       color:"#C0C4C9",
                       "1",
                   }
               }
           },
           yAxis: {
               axisLabel:{
                   color:"#8A8F97",
                   fontSize:'14',
               },
               axisLine:{
                   show:false,
               }
           },
           series: [
               {
                   type: 'bar',
                   itemStyle:{
                       color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                               {offset: 0, color: '#C7B4FC'},
                               {offset: 1, color: '#9C7AF7'}
                           ]
                       )
                   }
               },
               {
                   type: 'bar',
                   itemStyle:{
                       color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                               {offset: 0, color: '#7DF6AB'},
                               {offset: 1, color: '#0CD1CE'}
                           ]
                       )
                   }
               },
               {
                   type: 'bar',
                   itemStyle:{
                       color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                               {offset: 0, color: '#FFFF00'},
                               {offset: 1, color: '#FF6E02'}
                           ]
                       )
                   }
               }
           ]
       };
       //设置图表
       seven_day_chart.setOption(option_1);
       //图表自适应
       window.addEventListener("resize", function () {
           seven_day_chart.resize(); 
       });
    
    
  • 相关阅读:
    新的开始!
    find命令之mtime
    glances服务器监控工具
    centos7最小化安装改为图形界面
    ansible笔记(3)-文件操作模块(上)
    php-fpm参数详解
    ansible笔记(2)-模块简介
    centos创建交换分区
    等保测评三级整改-身份鉴别
    vsftp安装配置
  • 原文地址:https://www.cnblogs.com/aryu/p/10734948.html
Copyright © 2011-2022 走看看