折線圖和柱狀圖

折線圖

基礎折線圖配置

程式碼如下

var chartDoc = document.getElementById("line");//獲取顯示此圖表的標籤元素
var myChart = echarts.init(chartDoc);//初始化圖示配置
//折線圖引數如下：
option = {
  tooltip: {
    trigger: 'axis'
  },
  //標題：
  title: {
    text: '這是主標題',
    textStyle: {
      //這裡填主標題的樣式
      fontSize: 18,
      fontStyle: 'oblique', //字型樣式，斜體
      color: 'red',
      fontWeight:"bolder"//加粗
    },
    subtext: '這是副標題',
    subtextStyle: {
      //這裡編輯副標題的樣式
    },
    left: 'center', //居中，'left','right'
    top: 'top' //放圖上面，放底部為bottom
  },
  xAxis: {
    name: '星期',
    type: 'category', //類目軸直接跟軸資料
    data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'] //x軸資料，陣列型別
  },
  yAxis: [{
    name: 'y軸的名字',
    type: 'value' //值型別的軸資料放在series中
  },],
  series: [
    {
      data: [100, 1100, 300, 400, 500, 800, 200], //value軸的資料
      type: 'line', //線的型別
      itemStyle: {
        normal: {
          label: {
            //資料標籤
            show: true //是否顯示資料
          }
        }
      }
    }
  ]
};
option && myChart.setOption(option)
 

效果圖

1y軸多線折線圖

如下方式加入程式碼：

series:[
   {....},
   {
      data: [400, 1600, 700, 500, 400, 300, 800], //value軸的資料
      type: 'line', //線的型別
      itemStyle: {
        normal: {
          label: {
            //資料標籤
            show: true //是否顯示資料
          }
        }
      }
    }
]
   

效果圖：

多軸（2y軸）

如下加入程式碼

yAxis: [
    {......},
     {
      name: '第2個軸',
      type: 'value' 
    },
  ],
//再新增一條線
series:[
   {....},
   {....},
   {
      data: [40,33,34,45,36,44,35], //value軸的資料
      type: 'line', //線的型別
      yAxisIndex:1,//選擇用第幾個軸，從0開始
      itemStyle: {
        normal: {
          label: {
            //資料標籤
            show: true, //是否顯示資料
            formatter:"{c}℃"
          }
        }
      }
    }
]
 

效果圖

如果需要調整軸名稱的位置的話，可以看https://www.cnblogs.com/xyongz/p/15490718.html

柱狀圖

基礎柱狀圖配置如下

    var chartDoc = document.getElementById("bar");
    var myChart = echarts.init(chartDoc);
    option = {
        title: {
            text: '這是主標題',
            left: 'center',
            textStyle: {
                fontSize: 18,
                color: 'red',
                fontStyle: 'oblique'//斜體
            },
            subtext: '這是副標題',
            subtextStyle: {
                //設定與textStyle一致
            }
        },
        xAxis: {
            //x軸的屬性
            name: '星期',
            type: 'category',
            data: ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
        },
        yAxis: {
            //x軸的屬性
            name: '價格',
            type: 'value',
        },
        series: [{
            type: 'bar',
            data: [100, 400, 500, 700, 300, 500, 100],
            itemStyle: {
                normal: {
                    label: {
                        position: ['50%', '10%'],
                        color: 'white',
                        show: true,

                    },

                }
            }
        },]
    };
    option && myChart.setOption(option);
 

效果圖

多柱

程式碼如下：

 title:{.....},
 legend: {//新增圖例
    left: '20%',
    data: ['北京', '上海']
  },
  xAxis:{....},
  yAxis:{...},
  series:[
      {
      name:"北京",
      ....  
},
      {
      name: '上海',//注意，這個名字一定要和圖例中的名字一致，否則檢測不到
      type: 'bar',
      data: [200, 300, 400, 200, 400, 500, 400],
      itemStyle: {
        normal: {
          label: {
            position: ['50%', '10%'],
            color: 'white',
            show: true
          }
        }
      }
    },
]

效果圖