【关于学习Echarts的时候 - “新手”-解决方案】

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表,
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

Open官方的示例

点击跳转到官方示例
提示：找到自己对应要用的图表：

下面我就展示一个柱状图的示例

---

提示：其实在设置一些属性的时候找到对应的父级，语法是对的就差不多ok了！

一、示例

1、打开官方的示例
左边有对应的设置属性和数据

//X轴
  xAxis: [
    {
      type: 'value'
    }
  ],
  //Y轴
  yAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  series: [
    {
      name: 'Profit',
      type: 'bar',
      label: {
      	//设置是否在页面显示数据
        show: true,
        position: 'inside'
        //设置页面保留两位小数
        formatter: (d) => {
           let val;
         if (String(d.value).indexOf(".") > -1) {
             val = d.value.toFixed('2')
          } else {
               val = d.value
           }
                return val;
         }
      },
      emphasis: {
        focus: 'series'
      },
      /*
          *data就是对应的蓝色显示条，
	      *如果想设置百分比% 
	      *保留小数00.00
	      *往下看
      */
      data: [200, 170, 240, 244, 200, 220, 210]
    },

二、属性设置

提示：已经打开一个示例的网页了，再打开一个页面设置属性文档的
点击打开属性文档页面

1.series 设置类型数据格式化

刚刚打开的示例是横向的柱状图
就是下面

//设置图比如柱状图，折线图
/*
*bar: 柱状图
*line:折线图
* 等等一些
*/
type: 'bar' ,
colorBy: 'series' ,
legendHoverLink: true ,
coordinateSystem: 'cartesian2d' ,
xAxisIndex: 0 ,
yAxisIndex: 0 ,
polarIndex: 0 ,
roundCap: false ,
realtimeSort: false ,
showBackground: false ,
//还要很多属性根据自己的需要设置
/*
*刚刚打开了一个示例的页面左边我们可以编辑
*然后根据自己的需求，对应属性文档对应更改
*设置之前找到父节点，然后设置属性，注意格式逗号和大括号

---

总结

Echart：里面的内容还是比较全的，可以对应设置属性的文档，来编辑示例，最终复制到自己的编辑器上面去，
如果你看不懂英语可以稍微翻译一下，但是的话，最好不要翻译，因为你设置的时候都是英文属性