• 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(); 
       });
    
    
  • 相关阅读:
    加密和解密配置节(asp2.0以后)http://www.cnitblog.com/lby91772/archive/2008/03/04/40436.html
    多线程消息队列 (MSMQ) 触发器 http://blog.sina.com.cn/s/blog_405ad00201007rlw.html
    NUnit的使用
    HDU 1896 Stones
    POJ 1862 Stripies(哈夫曼)
    ZOJ 3230 Solving the Problems
    HDU 1242 Rescue(BFS)
    ZOJ 3410 Layton's Escape
    求逆序数
    HDU 1873 看病要排队
  • 原文地址:https://www.cnblogs.com/aryu/p/10734948.html
Copyright © 2020-2023  润新知