Echarts小例子

１.自定义拆线图

代码如下：

//设置阅读数图表信息
function setLineChart() {
  var lineChar = echarts.init(document.getElementById('read-line-box'));
  var option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:['点赞数','阅读数'],
        bottom: 0　//标记的位置
      },
      toolbox: {
        show: true,
        feature: {
          magicType: {show: true, type: ['stack', 'tiled']},
          saveAsImage: {show: true}
        }
      },
      xAxis: {
        type: 'category',
        splitLine: {
          show: false　//隐藏x轴在grid区域中的分隔线
        },
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
          name: '点赞数',
          type: 'line',
          smooth: false,
          symbol: 'rect',　//节点的形状为正方形
          symbolSize: 8,
          lineStyle: {
            normal: {
               color: '#ff5f71'　//线的颜色
            }
          },
          itemStyle: {
            normal: {
              color: '#ff5f71'　//节点的颜色
            }
          },
          data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '阅读数',
          type: 'line',
          smooth: false,
          symbol: 'circle', 　//节点的形状为圆形
          symbolSize: 8,
          lineStyle: {
            normal: {
               color: '#339fd0'
            }
          },
          itemStyle: {
            normal: {
              color: '#339fd0'
            }
          },
          data:[220, 50, 191, 234, 290, 100, 310]
        }
      ]
    };
  lineChar.setOption(option);
}

效果图如下：

２.自定义柱状图

代码如下：

//评论数信息图表信息
function setBarChart() {
  var barChar = echarts.init(document.getElementById('author-bar-box'));
  var option = {
      title : {
        text: ''
      },
      tooltip : {
        trigger: 'axis',
        show: false  //隐藏提示框浮层
      },
      legend: {
        data:['评论数','评论点赞数','作者回复数'],
        bottom: 0,
        itemWidth: 12,  //标记icon的宽度
        itemHeight: 12,　//标记icon的高度
        data: [{
          name: '评论数',
          icon: 'circle',　//标记icon的形状
          textStyle: 'red'
        },{
          name: '评论点赞数',
          icon: 'Square',
          textStyle: 'red'
        },{
          name: '作者回复数',
          icon: 'Square',
          textStyle: 'red'
        }]
      },
      toolbox: {
        show : true,
        feature : {
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          splitLine: {
            show: false
          },
          data : ['2016-10-18', '2016-10-19', '2016-10-20']
        }
      ],
      yAxis : [
        {
          type : 'value',
          splitLine: {
            show: false
          }
        }
      ],
      series : [
        {
          name:'评论数',
          type:'bar',
          itemStyle: {
            normal: {
              color: '#57c04e'
            }
          },
          label: {
              normal: {
                  show: true,
                  position: 'top',　//柱形上文字的位置
                  formatter: '{a}\n{c}',　//柱形上文字的显示格式
                  textStyle: {
                    color: '#000'
                  }
              }
          },
          data:[454, 1000, 1000]
        },
        {
          name:'评论点赞数',
          type:'bar',
          itemStyle: {
            normal: {
              color: '#fbab00'
            }
          },
          label: {
              normal: {
                  show: true,
                  position: 'top',
                  formatter: '{a}\n{c}',
                  textStyle: {
                    color: '#000'
                  }
              }
          },
          data:[100, 150, 80],
        },
        {
          name:'作者回复数',
          type:'bar',
          itemStyle: {
            normal: {
              color: '#fb4100'
            }
          },
          label: {
              normal: {
                  show: true,
                  position: 'top',
                  formatter: '{a}\n{c}',
                  textStyle: {
                    color: '#000'
                  }
              }
          },
          markPoint: {
            symbol: 'circle'
          },
          data:[150, 100, 200]
        }
      ]
    };
  barChar.setOption(option);
}

效果图如下：

具体参数可去官网查看： Echarts官网