zoukankan      html  css  js  c++  java
  • echart 图表自定义样式

    initChart: function (id) {
            this.charts = echarts.init(document.getElementById(id))
            this.charts.setOption({
              xAxis: {
                type: 'category',
                data: ['11号', '12号', '13号', '14号', '15号'],
                color: ['#DDDDDD'],
                name:'4月',
                show: true, 
                nameTextStyle: {
                  color: '#636363', // 坐标轴名称样式
                  left:'0'
                },
                axisLine: {
                  lineStyle: {
                    color: '#DDDDDD',
                     1
                  }
                },
                axisTick: { //去除刻度线
                    show: false
                },
                axisLabel: {
                  show: true, //坐标轴的文字是否显示
                  textStyle: {
                    color: '#323232', //坐标轴上的字体颜色
                    fontSize:'12' // 坐标轴字体大小
                  }
                },
              },
              yAxis: {
                type: 'value',
                name:'金额(元)',
                show: true, 
                nameTextStyle: {
                  color: '#636363', // 坐标轴名称样式
                  left:'0'
                },
                axisLine: {
                  lineStyle: {
                    color: '#DDDDDD',
                     1
                  },
                  textStyle: {
                    color: '#323232', //x轴上的字体颜色
                    fontSize:'11' // x轴字体大小
                  }
                },
                axisTick: { //去除刻度线
                    show: false
                },
                axisLabel: {
                  show: true, //坐标轴的文字是否显示
                  textStyle: {
                    color: '#323232', //坐标轴上的字体颜色
                    fontSize:'12' // 坐标轴字体大小
                  }
                },
                splitLine:{  
                  show:true  ,
                  lineStyle:{
                    color:'#DCDCDC',
                     1
                  }
                },
                min:0,  //坐标轴最大值
                max:700,  //坐标轴最大值
                splitNumber:10,  //间隔线间距
                
    
              },
              series: [{
                data: [320, 240, 280, 500, 290],
                type: 'line',
                color: '#F40000',
                symbol: 'circle',//折线点设置为实心点
                symbolSize: 9,   //折线点的大小
                symbol:'circle',
                smooth:false,
                itemStyle:{
                    normal:{
                        // color:'#ddd',
                        lineStyle:{
                            1,
                            type:'solid',  //'dotted'虚线 'solid'实线
                            color:'#F40000',
                        },
                        label : { //折线上的数据
                          show: true,
                          position: 'top',
                          color:'#636363'
                        },
    
                    }
                }
              }]
            });
    

      

  • 相关阅读:
    【WebGoat笔记】 CrossSite Scripting(XSS)
    SQL注入测试工具:Pangolin(穿山甲)
    SQL注入测试工具:Pangolin(穿山甲)
    js取两日期差,包含周六周日?
    CrossSite Scripting(XSS): 跨站脚本攻击介绍
    apmserv虚拟主机不能用set_time_limit(0);
    名称 不是有效的标识符 sql
    最佳的75个安全测试工具
    fzu 1686(DLX 重复点覆盖)
    hdu 3529(DLX)
  • 原文地址:https://www.cnblogs.com/Kyaya/p/10850849.html
Copyright © 2011-2022 走看看