【知识分享-移动图表系列】进阶篇-移动图表插件赋值

前言

      继上一篇《入门篇-初识移图报表--业务对象报表》和《入门篇-初识移图报表--Sql报表》之后，本篇主要介绍通过插件赋值。

预备知识 

     图表字段基于开源项目ECharts实现，所以，进行该字段的插件开发，建议提前熟悉ECharts相关语法和接口，相关文档：

https://echarts.apache.org/zh/index.html

插件实例 

     表插件赋值，支持2种方式：强类型和纯json字符串类型；其中，纯json字符串类型可以在echarts官方测试（https://echarts.apache.org/examples/zh/editor.html?c=bar-simple  ），所见所得，如图：

1、bos设计器设置：

2、运行效果：

3、点线图，插件强类型赋值（需要使用不同的强类型，属性有差别）：

条形图：BarChartData；柱状图：HistogramChartData；点线图：PointLineChartData；饼图：PieChartData；雷达图：RadarChartData

        /// <summary>
        /// 点线图--强类型赋值
        /// </summary>
        private void SetPointLineChartData()
        {
            //条形图：BarChartData；柱状图：HistogramChartData；点线图：PointLineChartData；饼图：PieChartData；雷达图：RadarChartData
            //每个强类型
            var data = new PointLineChartData();
            Title title = new Title();
            title.show = true;
            title.text = "万PCS";
            title.textAlign = "left";
            title.subtext = "";
            title.x = "left";
            title.y = "top";
            data.title = title;

            data.legend.show = true;
            data.legend.x = "center";
            data.legend.y = "bottom";
            data.legend.data = new List<string>() { "销售目标", "销售收入", "销售成本" };

            data.xAxis.data = new List<string>() { "9月", "10月", "11月", "12月" };
            data.xAxis.axisLabel.textStyle.color = "#6d7073";
            data.yAxis.axisLabel.textStyle.color = "#6d7073";


            var series1 = new PointLineChartSeries() { name = "销售目标" };
            series1.data = new List<decimal>() { 7200m, 9800m, 8500m, 10600m };
            series1.itemStyle.normal.areaStyle.color = new List<string>() { "rgba(255,246,244,0.7)" };
            data.series.Add(series1);

            var series2 = new PointLineChartSeries() { name = "销售收入" };
            series2.data = new List<decimal>() { 6000m, 8000m, 4500m, 7000m };
            series2.itemStyle.normal.areaStyle.color = new List<string>() { "rgba(255,242,233,0.7)" };
            data.series.Add(series2);

            var series3 = new PointLineChartSeries() { name = "销售成本" };
            series3.data = new List<decimal>() { 1600m, 3800m, 900m, 2000m };
            series3.itemStyle.normal.areaStyle.color = new List<string>() { "rgba(233,231,237,0.7)" };
            data.series.Add(series3);

            this.Model.SetValue("FPointLineChartField", data);
        }

4、点线图，插件强类型赋值：

        /// <summary>
        /// 柱状图赋值--强类型赋值
        /// </summary>
        private void SetHistogramChartData()
        {
            var data = new HistogramChartData();
            Ti