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(); 
       });
    
    
  • 相关阅读:
    更改Linux时区的两种方法
    Azure上部署FTP服务
    log4j2简单使用
    elasticsearch5.5.2环境搭建
    springTask和Schedule学习
    防止SpringMVC拦截器拦截js等静态资源文件
    Mysql中使用FIND_IN_SET解决IN条件为字符串时只有第一个数据可用的问题
    ServletContext总结
    window.location.href和window.location.replace的区别
    javadoc文档
  • 原文地址:https://www.cnblogs.com/aryu/p/10734948.html
Copyright © 2011-2022 走看看