echarts的使用过程

Posted 2020-09-18

公司项目现在比较趋向于数据展示如：柱形图、环形图、折线图等等。所以就必须用一些图表插件,比较经常使用的是echarts和hightchart 。

echarts的使用过程看API真的是快让我炸了 所以找个时间把它记录一下 省的日后继续翻来翻去。

//文字旋转角度
axisLabel: {
interval: 0,//刻度值逐个显示   若为1 则是隔一个显示一个
rotate: 40,//文字旋转角度
textStyle: { //文字的样式设置
color: ‘#fff‘,
fontSize: 12
}
}

//y轴的设置

yAxis: [{
type: ‘value‘,
name: ‘电话数量‘, //Y轴的标题
nameLocation:‘middle‘, //标题位置 middle为居中显示
nameGap:40, //标题距轴线的距离
min: 0,
max: 500,
interval: 50, //隔几个数据显示 
axisLabel: {
formatter: ‘{value} ‘
}，

splitLine: { show: false }, //去除网格线

axisLine: {    //改变轴颜色
lineStyle: {
color: ‘#fff‘,
}
},

},

//tooltip

tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘ 鼠标滑入时的柱形图有一个遮罩层一样
}
},