使用：echarts使用

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>