Echarts 是一种常用的图表。
帅帅哥常的操作笔记分解
|
颜色： color: ['#1890FF', '#00C6C4’]
标题大小、颜色： title : { text:'流量统计与转化', x: 'center', y: '70%', textStyle:{ fontSize: 14, color: '#000', fontWeight: 'normal', }, }
图表的内边距：可理解为padding grid: { left: '2%', right: '2%', bottom: '6%', containLabel: true } |
|
|
图表标题： legend: { 居中 orient: ‘horizon tal', // 'horizontal/vertical’ , x: 'center’, 表标题标志类型（圆） icon: 'circle’, 内边距 padding: [20, 0, 0, 0], 表标题圆宽高 itemWidth: 40, itemHeight: 10, 表标题间距 itemGap: 40, }, |
|
|
X、Y 轴背景线的样式： xAxis : { splitLine:{ lineStyle: { type: 'dashed', color: '#E8E8E8', } } }
|
|
|
X 轴文字过长处理方法： xAxis : { 1､倾斜 axisLabel: { interval: 0, rotate: 40, }
2､垂直 axisLabel: { formatter:function(value) { return value.split("").join("\n"); } }
3､省略号 axisLabel: { formatter: function (value, index) { // 1 2 这些你自定义就行 var v = value.substring(0, 3) + '...' return value.length > 2 ? v : value } }
}
注） 1､interval 坐标轴刻度标签的显示间隔(类目轴中有效)，默认会采用标签不重叠的方式显示（默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推。 2､rotate 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠，旋转的角度是-90到90度。
|
倾斜:
垂直:
省略号： |
|
X 、Y 轴数据转换 xAxis: { X轴坐标轴两端空白 boundaryGap : false
X 、Y轴网络线去除 splitLine:{ show: false }
X 、Y 轴网络区域去除 splitArea : {show : false}
X 、Y 轴线颜色、宽度 axisLine: { lineStyle: { color: ‘red', width: 1, } }
X 、Y 轴线分隔线、颜色 axisTick: { show:false， lineStyle: { color: ‘#000', width: 1, } }
X 、Y 轴文字颜色 axisLabel: { textStyle: { color: '#000' }, } }
图表边框线去除 grid: { show:'true', borderWidth:'0' }
鼠标放上去有阴影 tooltip : { trigger: 'axis', axisPointer: { type: ‘shadow' } }, }
|
修改前：
修改后： X、Y 轴数据转换
图表边框线去除：（边框线存在原力如下：鼠标放上去有阴影）
鼠标放上去有阴影： |
|
Y 轴的数据转换： 1､小数转成百分比 yAxis: { type: 'value', axisLabel:{ // formatter:'{value}%' formatter:function(value) { return value*100 + '%'; } } },
2､鼠标放上去的地方也要转成百分比 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter:function(c) { return (c[0].value)*100 + '%'; } },
注）Echarts 中 如果要写js,都在 formatter 这个函数里面写。 |
修改前：
修改后： 1､小数转成百分比 2､鼠标放上去的地方也要转成百分比 |
|
|
|
ECharts 基础引入方法
|
Js 中使用方法 |
参考官方文档，直接引用 |
参考官方文档，直接引用 |
|
react 中使用方法 |
|
// 引入 ECharts 主模块 import ReactEcharts from 'echarts-for-react'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和标题组件 import echarts from 'echarts/lib/echarts'; import 'echarts/lib/component/tooltip’;
getOptionLineOne = ( ) =>({ //do something })
<ReactEcharts showLoading={this.props.loading} loadingOption={{ text: '数据正在努力 加载…', effect:'bubble’, }} option={this.getOptionLineOne()} style={{ height: 328 }} />
|
|
vue 中使用方法 |
|
<script> import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/pie'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/tooltip';
<template> <div style="width: 300px;height:145px;"></div> </template>
export default { mounted(){ this.myChart = echarts.init(document.getElementById('visitorpie')); this.initData(); }, props: ['pieData'], methods: { initData(){ const option = { // do something }; this.myChart.setOption(option); } }, watch: { pieData: function (){ this.initData() } } } </script> |
|
|
|
|