Echarts(api汇总+配图)

先推荐一个Echarts二次封装库
Make A Pie图表库

柱状图and折线图

创建

const dom = document.getElementById(chartsId)
if (!dom) return
const myChart = echarts.init(dom as HTMLDivElement)
const option = {
	grid: {},
	title: {},
	tooltip: {},
	legend: {},
	xAxis: {},
	yAxis: [] || {},
	series: [] || {}
}
myChart.setOption(option)

配置项

1. grid – 边距

grid: {
  left: '2%',
  right: '2%',
  bottom: '15%',
  top: '12%',
  containLabel: true // 包含了指示标、标题等等内容
}

2. title – 标题

title: {
  text: '我是大标题',
  x: 'center',
  y: '4%',
  textStyle: {
    color: "#334355",
    fontSize: 16,
    fontWeight: 400
  }
},

3. tooltip – 坐标轴指示器和小提示框

tooltip: {
	axisPointer: { // 坐标轴提示器
	 // type: 'shadow'， 柱状，写在最外层，
	    lineStyle: {
	      color: {
	        type: 'linear', // 直线，写在color里或者不写，因为默认为直线
	        x: 0,
	        y: 0,
	        x2: 0,
	        y2: 1,
	        colorStops: [{ // 线性渐变色
	          offset: 0,
	          color: 'rgba(0, 0, 0, 0)'
	        }, {
	          offset: 0.5,
	          color: 'rgba(0, 0, 0, .3)',
	        }, {
	          offset: 1,
	          color: 'rgba(0, 0, 0, 0)'
	        }]
	      }
	    }
	  },
	  formatter: (params: any) => { // 小提示框
	    return `<div>${params[0].name}</div>
	    		  <div>${params[0].marker}${params[0].seriesName}: ${params[0].value}个</div>
	    		  <div>${params[1].marker}${params[1].seriesName}: ${params[1].value}条</div>`
	  }
}

4. legend – 筛选 (data里的值必须和series里的name值对应，否则无效)

legend: {
  data: ['上线场景数', '产生对等人月'],
  left: '3.5%',
  bottom: '5%',
  textStyle: {
    color: "#666666"
  },
  itemWidth: 15,
  itemHeight: 10,
  itemGap: 25 // 间隔
}

5. xAxis – X轴

 xAxis: { // https://echarts.apache.org/zh/option.html#xAxis
   show: true,
   type: 'category',
   data: chartsData.xArr || [],
   axisLine: { // x轴底下的一根线，不要可以color设置为透明
     lineStyle: {
       color: '#cdd5e2'
     }
   },
   axisLabel: { // x轴字
     formatter: (params: any) => params,
     textStyle: {
       color: "#666666"
     }
   },
   splitLine: { // x轴的竖着的一根一根分割线，基本不用
     show: false,
     lineStyle: {
       color: '#cdd5e2'
     }
   },
 }

6. yAxis – Y轴yAxis

yAxis: [ // https://echarts.apache.org/zh/option.html#yAxis
	{ // 左边
	  position: "left", // 左边位置
	  show: true,
	  type: 'value',
	  splitLine: { // 和y轴每个值对应的横线
	    show: true,
	    lineStyle: {
	      color: '#cdd5e2'
	    }
	  },
	  axisLine: { // y轴边上的竖线
	    show: true,
	    lineStyle: {
	      color: '#cdd5e2'
	    }
	  },
	  axisLabel: { // y轴的内容
	    formatter: (params: any) => params,
	    textStyle: {
	      color: "#666666"
	    }
	  }
	},
	{ // 右边
	  position: "right", // 右边位置
	  show: true,
	  type: "value",
	  axisLine: {
	    show: true,
	    lineStyle: {
	      color: '#cdd5e2'
	    }
	  },
	  splitLine: {
	    show: false,
	  },
	  axisLabel: {
	    show: true,
	    formatter: (params: any) => params,
	    textStyle: {
	      color: "#666666"
	    }
	  }
	}
]

7. series – Y轴series

series: [ // 柱子或线的数据和样式 -- https://echarts.apache.org/zh/option.html#series
   {
     yAxisIndex: 0, // 对应yAxis数组里的下标
     name: '上线场景数', // 对应legend里的data里的值
     type: 'bar', // bar柱状图，line线图
     barWidth: '14px', // 柱子宽度
     itemStyle: { // 样式，渐变色(从上到下)或柱子圆角
       normal: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 渐变色
           offset: 0,
           color: '#29acff'
         }, {
           offset: 1,
           color: '#4bdfff'
         }]),
         barBorderRadius: [12, 12, 0, 0] // 圆角
       }
     },
     data: chartsData.yLeftArr || []
   },
   {
     yAxisIndex: 1, // 对应yAxis数组里的下标
     name: '产生对等人月', // 对应legend里的data里的值
     type: "line", // bar柱状图,line线图
     smooth: false, // true平滑的线
     symbol: "circle", // emptyCircle空心,circle实心,none没圆，方形三角等等 https://echarts.apache.org/zh/option.html#series-line.symbol
     symbolSize: 5, // 圆的大小
     itemStyle: { // 圆的样式，通过边框半透明等等做各种样式
       normal: {
         color: '#6497FF',
         borderColor: 'rgba(100, 151, 255, 0.5)',  //圆点透明 边框
         borderWidth: 4
       }
     },
     lineStyle: { // 线的颜色
       color: "#6497FF"
     },
     data: chartsData.yRightArr || []
   }
 ]