图表echart笔记。

1，在angular中引入的echart

  npm install echarts --save
  npm install ngx-echarts@3.2.0 --save
  在angular.json文件中build》options》scripts中引入： "node_modules/echarts/dist/echarts.min.js"
  在app.module.ts中引入NgxEchartsModule 就可以用了

2，柱状图加折线图配置详解

public chartOptionOne = {
    color: ['#3398DB', '#F7CB4A'],	//配置折现图，柱状图颜色。按照serise数据排序。
    tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // toolbox: {        //右上角菜单选项
    //   feature: {
    //     dataView: {show: true, readOnly: false},
    //     magicType: {show: true, type: ['line', 'bar']},
    //     restore: {show: true},
    //     saveAsImage: {show: true}
    //   }
    // },
    grid: {		//调整整个图形的距离
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {	//中间上方的菜单选项。控制显示哪些图形。
      data: ['交易笔数', '增长率']
    },
    xAxis : [		//x轴配置
      {
        type : 'category',
        data : ['一月', '二月', '三月', '四月', '五月', '六月'],
        axisTick: {
          alignWithLabel: true
        },
        name : '月份'	//单位
      }
    ],
    yAxis : [		//y轴配置
      {
        type : 'value',
        name : '交易笔数'
      },
      {
        type : 'value',
        name : '百分比',
        min : 0,
        max : 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series : [	//填充数据
      {
        name: '交易笔数',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330]
      },
      {
        name : '增长率',
        type : 'line',
        data: [10, 11, 56, 23, 67, 99]
      }
    ]
  };