flutter_echarts完美使用教程()

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

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

1.  
   Container(
2.  
   width:MediaQuery.of(context).size.width,
3.  
   height: 250,
4.  
   child: Echarts(
5.  
   option: jsonEncode({
6.  
   "legend":{
7.  
   "x": 'center',
8.  
   "y": 'bottom',
9.  
   "show": true,
10.  
    "textStyle": {//图例的公用文本样式。
11.  
    "fontSize": 14,
12.  
    "color": "#333",
13.  
    },
14.  
    "itemGap": 20,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
15.  
    "data": ['项目金额(万元)', '项目数量'],//图例的数据数组。
16.  
    "inactiveColor": '#ccc',
17.  
    },
18.  
    "xAxis":{ //X轴数据
19.  
    "type":"category",
20.  
    "data":["2017","2018","2019","2020","2021","2022","2023"],
21.  
    },
22.  
    "yAxis":[
23.  
    { //Y轴数据
24.  
    "type":"value",
25.  
    "splitNumber":"5",
26.  
    "name":"万元",
27.  
    "axisLabel": {
28.  
    "color": '#027eff' // 修饰刻度标签的颜色
29.  
    },
30.  
    "nameTextStyle":{
31.  
    "color":"#027eff",
32.  
    }
33.  
    },
34.  
    {
35.  
    "type": 'value',
36.  
    "min": '0',//最小坐标
37.  
    "max": '12',//最大坐标
38.  
    "splitLine": {
39.  
    "show": false//是否显示分隔线。
40.  
    },
41.  
    "name":"个",
42.  
    "axisLabel": {
43.  
    "color": '#FF9800' // 修饰刻度标签的颜色
44.  
    },
45.  
    "nameTextStyle":{
46.  
    "color":"#FF9800",
47.  
    }
48.  
    }
49.  
     
50.  
    ],
51.  
    "series":[
52.  
    { //对应点得值
53.  
    "name":"项目金额(万元)",
54.  
    "data":[820,932,901,934,1290,1330,1320],
55.  
    "barWidth": '50%',
56.  
    "type":"bar",
57.  
    "itemStyle":{
58.  
    "normal":{
59.  
    "barBorderRadius": 0,
60.  
    "color": {
61.  
    "type": 'linear',
62.  
    "x": 0,
63.  
    "y": 0,
64.  
    "x2": 0,
65.  
    "y2": 1,
66.  
    "colorStops": [
67.  
    {
68.  
    "offset": 0, "color": '#00feff',
69.  
    },
70.  
    {
71.  
    "offset": 1, "color": '#027eff',
72.  
    },
73.  
    {
74.  
    "offset": 1, "color": '#0286ff',
75.  
    },
76.  
    ],
77.  
    },
78.  
    },
79.  
    }
80.  
    },
81.  
    { //对应点得值
82.  
    "name":"项目数量",
83.  
    "data":[1,9,3,3,12,9,2],
84.  
    "yAxisIndex": '1',
85.  
    "smooth": true, // 是否让线条圆滑显示
86.  
    "type":"line",
87.  
    "color": '#FF9800'
88.  
    },
89.  
    ]
90.  
    }),
91.  
    ),
92.  
    )

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

这篇好文章是转载于：学新通技术网