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',
                width: 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',
                width: 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',
                width: 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:{
                        width:1,
                        type:'solid',  //'dotted'虛線 'solid'實線
                        color:'#F40000',
                    },
                    label : { //折線上的數據
                      show: true,
                      position: 'top',
                      color:'#636363'
                    },

                }
            }
          }]
        });

  

相關文章
相關標籤/搜索