echarts图表的使用

因为是入门级别，我也在学习，有新的知识我会补充进来。

一、初级入门(例子)

• 引入文件

                  <script type="text/javascript" src="js/echarts.js" ></script>

• 创建容器

                  <div id="echartsTable" style="width:600px; height: 400px;"></div>

• 编写图表
  

                      <script type="text/javascript">
                                    window.οnlοad=function(){
                                           //指定图标的配置和数据
                                           var option = {
                                             title:{
                                                           text:'ECharts 数据统计'
                                                    },
                                            tooltip:{},
                                            legend:{
                                                          data:['用户来源']
                                                          },
                                            xAxis:{
                                                          data:["Android","IOS","PC","Ohter"]
                                                      },
                                            yAxis:{

                                                      },
                                           series:[{
                                                         name:'访问量',
                                                         type:'line',
                                                        data:[500,200,360,100]
                                                        }]
                                             };
                                           //初始化echarts实例
                                           var myChart = echarts.init(document.getElementById('echartsTable'));
                                          //使用制定的配置项和数据显示图表
                                           myChart.setOption(option);
                                              }
                     </script>

 

二、echarts图

在使用中一些常用的属性(我在使用时有用到的，其他没使用未展示)

有几个提出来的属性

    lineStyle、textStyle、itemStyle

标题title:
      show
      text
      textStyle
      padding
      left
      top

网格grid:
  show

x坐标xAxis：
  show
  position
  type:value、time、category、log
  name
  min
  max
  axisLine:坐标轴线相关操作
    show
    lineStyle：线样式
      color
      type
      width

y坐标yAxis
  show
  type:value、time、category、log
  name
  position
  gridIndex：开始位置
  nameTextStyle:文字样式
  min
  max
  axisLine:轴线操作
    lineStyle
      color
      width
      type:solid、dashed、dotted

提示框tooltip：
  show
  trigger:触发类型item(数据)、axis(轴线)、none
  formatter：提示内容模板
  backgroundColor
  padding
  textStyle：文字样式

全局坐标系组件geo：（用于散点图、线集）
  show
  map
  roam:图表是否缩放
  label：图标上的信息
  itemStyle：图形样式

全局背景backgroundColor

全局字体样式textStyle:


 

数据及图标配置serise:

************************************************************

技能点

       有时柱状图会因为图太小x轴文字展现补全

     

xAxis: [{
			type: 'category',
			data: listX,
			axisTick: {
				alignWithLabel: true
			},
			axisLabel: {
	                  interval:0,
	                  rotate:40
	               }
		}],