flutter_echarts完美使用教程(技巧)

之前图表一直使用fl_chart，只能满足基本的图表需求，像折线图和柱状图一起显示好像没有（没仔细研究），随后发现了flutter_echarts的图表还是比较强大的，但是这个官方示例看着就想放弃了，有点懵...，这转译的json配置与其他widget配置显的格格不入，没有一点层次感。

于是，翻阅度娘发现了有前辈使用jsonEncode进行转译，这样看起来就显的好多了

Container(
      width:MediaQuery.of(context).size.width,
      height: 250,
      child: Echarts(
        option: jsonEncode({
          "legend":{
            "x": 'center',
            "y": 'bottom',
            "show": true,
            "textStyle": {//图例的公用文本样式。
              "fontSize": 14,
              "color": "#333",
            },
            "itemGap": 20,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
            "data": ['项目金额(万元)', '项目数量'],//图例的数据数组。
            "inactiveColor": '#ccc',
          },
          "xAxis":{		//X轴数据
            "type":"category",
            "data":["2017","2018","2019","2020","2021","2022","2023"],
          },
          "yAxis":[
            {		//Y轴数据
              "type":"value",
              "splitNumber":"5",
              "name":"万元",
              "axisLabel": {
                "color": '#027eff' // 修饰刻度标签的颜色
              },
              "nameTextStyle":{
                "color":"#027eff",
              }
            },
            {
              "type": 'value',
              "min": '0',//最小坐标
              "max": '12',//最大坐标
              "splitLine": {
                "show": false//是否显示分隔线。
              },
              "name":"个",
              "axisLabel": {
                "color": '#FF9800' // 修饰刻度标签的颜色
              },
              "nameTextStyle":{
                "color":"#FF9800",
              }
            }

          ],
          "series":[
            {	//对应点得值
              "name":"项目金额(万元)",
              "data":[820,932,901,934,1290,1330,1320],
              "barWidth": '50%',
              "type":"bar",
              "itemStyle":{
                "normal":{
                  "barBorderRadius": 0,
                  "color": {
                    "type": 'linear',
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [
                      {
                        "offset": 0, "color": '#00feff',
                      },
                      {
                        "offset": 1, "color": '#027eff',
                      },
                      {
                        "offset": 1, "color": '#0286ff',
                      },
                    ],
                  },
                },
              }
            },
            {	//对应点得值
              "name":"项目数量",
              "data":[1,9,3,3,12,9,2],
              "yAxisIndex": '1',
              "smooth": true,   // 是否让线条圆滑显示
              "type":"line",
              "color": '#FF9800'
            },
          ]
        }),
      ),
    )

echarts还有很多用法，上述只是用了两个图标显示在一起的方式，其他使用方法及注意事项请参考官方api，然后在option里用jsonEncode配置就可以了，最后上个效果图