Echarts 屬性大全設置

折线图显示圆滑：smooth:true

 series: 
              {
                name: "数据",
                type: "line",
                data:b,
                smooth: true,
                color:"#0ff",

}
             
              

X轴的图显示位置：

 xAxis: {
            
              {
                axisTick:{
                  alignWithLabel:true
              },
  
            },

对比：

柱状图间距：

{
            label: {
            stack: '1',
            color: "#4db9f7",
            barGap: '0%', 
            name: "",
            barWidth: '20%',
            type: "bar",
            data: d,
          },

title設置：

 var option1 = {
        title: [{
            text: 'AAAAAAA',
            x: '23%',
            y: '34%',
          },
          {
            text: "BBBBBBB",
            x: '70%',
            y: '34%',
          }
        ],

坐标轴两边空白策略：

   xAxis: {
            boundaryGap: true
          },

坐标轴隐藏刻度线：

 yAxis: {
            axisTick: {
              show: false
            },
  }

 xAxis: {
            axisTick: {
              show: false
            },
  }

给纵坐标设置最大最小值和增长间距：

  yAxis: {
            type:'value',
            min:50,
            max:100,
            interval:15,}

设置图例样式:

legend: {

icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

itemWidth: 10,  // 设置宽度

itemHeight: 10, // 设置高度

itemGap: 40 // 设置间距

},

 設置縱坐標百分比和坐標軸顏色:

yAxis: {
            // 縱坐標百分比
            axisLabel: {
              show: true,
              formatter: '{value} %'  
            },
            // 縱坐標軸顏色
            axisLine: {
              lineStyle: {
                color: '#00a2ff'
              }
            },
           // 縱坐標線顏色
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0,162,255,0.2)",
                width: 1,
              }
            }
          },

1.設置Y軸從數據最小的開始顯示:

yAxis: {
          scale:true,
      
        },

 

2.min可以设置为特殊值‘dataMin’，此时取数据在该轴上的最小值作为最小刻度。

1.  

   yAxis: {
   
   min: 'dataMin' // 最小值
   
   },

    

 設置漸變色:

  areaStyle: {
            normal: {
               // //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                offset: 0, color: '#4e8aeb' // 0% 处的颜色
            }, {
                offset: 0.5, color: '#f00' // 50% 处的颜色
            }, {
                offset: 1, color: '#fff' // 100% 处的颜色
            }]
        ),
            }
          },

折線圖拐點的樣式:

symbol:"circle";

// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
        '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
        '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
        '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

// 图表标题
title: {
    x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}（x坐标，单位px）
    y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 标题边框颜色
    borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                               // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'          // 主标题文字颜色
    },
    subtextStyle: {
        color: '#aaa'          // 副标题文字颜色
    }
},

// 图例
legend: {
    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                               // 'horizontal' ¦ 'vertical'
    x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                               // 'center' ¦ 'left