Echarts

Echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），
底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

下载Echarts

Echarts 下载需要进行定制下载，下载出来为echarts.min.js文件。在项目中进行导入，

Echarts使用配置

title:'标题组件，包含主标题和副标题'

使用Echarts

首先在示例中进行图形化的选择点击download，在项目页面中进行Echarts进行导入，配置相关参数以及内容。
let dom = document.getElementById("content");
        let myChart = echarts.init(dom);
if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

进行图形图像得展示。
 function demo_two_all(data,title) {
      var dom = document.getElementById("content");
        var myChart = echarts.init(dom);
        var name_list = [];
        var user_number  = [];
        var all_number = [];
        for (var i=0;i<data.length;i++){
            name_list.push(data[i].title);
            user_number.push(data[i].number);
            all_number.push(data[i].value)
        }
        console.log(name_list);
        var app = {};
        option = null;
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];
        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };
        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };
        var labelOption = {
            normal: {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };
        option = {
             title:{
                text:title,
                left: '130px'
            },
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['标准分值', '用户分数'],
                orient: 'horizontal',
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                top: 'center',
                right: '20px',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: name_list,
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '标准分值',
                    type: 'bar',
                    barGap: 0,
                    {#label: labelOption,#}
                    data: all_number,
                    barWidth :35,
                    itemStyle:{
                        normal:{
                             color:function (params) {
                                 var colorList = ['#3C72C4', '#3C72C4', '#3C72C4', '#4D2292', '#4D2292', '#4D2292', '#4D2292', '#947e39', '#947e39', '#947e39'];
                                 return colorList[params.dataIndex];
                             }

                        }
                    }
                },
                {
                    name: '用户分数',
                    type: 'bar',
                    {#label: labelOption,#}
                    data: user_number,
                    barWidth :35,
                },
            ]
            };
if (option && typeof option === "object") {
    myChart.setOption(option, true);
        }
      }