折线图和柱状图

折线图

基础折线图配置

代码如下

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
          }
        }
      }
    },
]

效果图