前言

      继上一篇《入门篇-初识移图报表--业务对象报表》和《入门篇-初识移图报表--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();
            Title title = new Title();
            title.show = true;
            title.text = "万PCS";
            title.textAlign = "left";
            title.subtext = "";
            title.x = "left";
            title.y = "top";
            data.title = title;

            Legend legend = new Legend();
            legend.show = false;
            data.legend = legend;

            data.xAxis.data = new List<string>() { "柏氏", "白晳", "纯新", "柏雅", "专供", "翡翠佳人" };
            data.xAxis.axisLabel.textStyle.color = "#6d7073";
            data.yAxis.axisLabel.textStyle.color = "#6d7073";

            var series1 = new HistogramChartSeries() { name = "商品" };
            series1.data = new List<decimal>() { 3.55m, 4.8m, 2.3m, 3.1m, 1.6m, 4.1m };
            series1.itemStyle.normal.color = new List<string>() { "#9f93f9", "#ffd16f", "#5acde0", "#fc7b5d", "#a7a7a7", "#f38ec3" };
            data.series.Add(series1);

            //是否启用滑动缩放效果，如不需要，可以不设置zoom
            Zoom dataRoom = new Zoom();
            dataRoom.show = true;
            data.dataZoom.Add(dataRoom);

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

5、条形图，插件JSON字符串赋值（可在echarts官方中测试效果）：

需要自行构建json数据

        /// <summary>
        /// json字符串赋值
        /// </summary>
        private void SetEChartsData()
        {
            string data = "{\"xAxis\":{\"type\":\"value\"},\"yAxis\":{\"type\":\"category\",\"data\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"]},\"series\":[{\"type\":\"bar\",\"data\":[120,200,150,80,70,110,130]}],\"dataZoom\":[{\"type\":\"slider\",\"show\":true,\"xAxisIndex\":[0],\"start\":0,\"end\":60}],\"grid\":{\"containLable\":true}}";
            this.Model.SetValue("F_kd_EChartsField", data);
        }