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'
                        },
    
                    }
                }
              }]
            });
    

      

  • 相关阅读:
    笔记-归并排序
    Repeated Substring Pattern
    Assign Cookies
    Number of Boomerangs
    Paint Fence
    Path Sum III
    Valid Word Square
    Sum of Two Integers
    Find All Numbers Disappeared in an Array
    First Unique Character in a String
  • 原文地址:https://www.cnblogs.com/Kyaya/p/10850849.html
Copyright © 2011-2022 走看看