关于echarts图

因为项目需要，又要写echarts图，除了写图形以外，它本身自带颜色是非常难看，所以也需要把颜色改一下。我做了三种图：折线、柱状、饼图。添加颜色的方法分别是：

折线

在option 里

//创建折线图
    function createCharts(chart) {
        // 基于准备好的dom，初始化echarts实例
        myChartLine = echarts.init(document.getElementById('Line_charts'));
        var series = [];

        for (var i = 0; i < chart.Series.length; i++) {
            //strat
            var ser = {
                name: chart.Series[i].Name,
                type: 'line',
                //stack: '总量',

                data: chart.Series[i].Values
            }
          
            series.push(ser)
        }
        // 指定图表的配置项和数据
        option = {
　　　　　　//标题
            title: {
                text: '进销项票关键数据变化趋势',
                x: 'center',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: chart.Categories,
                x: 'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: chart.XAxisValues
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color: ['#ff5471', '#18476e', '#55a8fd'],
            series: series
           
        };

        // 使用刚指定的配置项和数据显示图表。
        myChartLine.setOption(option);
    }

 

 

　　

 

　　如果单条线在option里

 series: [
        {
            name:'Step Start',
            type:'line',
            step: 'start',
            itemStyle: {
                        normal: {
                            color: '#55a8fd',
                            lineStyle: {
                                color: '#55a8fd'
                            }
                        }
                    },
            data:[120, 132, 101, 134, 90, 230, 210]
        },

 

 

柱形

特别注意的一点是，如果用同上方法，柱子的颜色都是一样，所以需要另外方法设置：

 //创建柱状图
    function createBar(chart) {

        myChartBar = echarts.init(document.getElementById('bar_charts'));
        var series = [];
        for (var i = 0; i < chart.Series.length; i++) {
            series.push({
                name: chart.Series[i].Name,
                type: 'bar',
                //stack: '总量',
                data: chart.Series[i].Values,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = [
                              '#ff5471', '#18476e', '#55a8fd', '#fccd39', '#f89a36'
                            ];
                            return colorList[params.dataIndex]
                        },
                    }
                },
                //设置柱子的宽度
                barWidth: 50,
            })
        }

　

 

　

 饼形

 //创建饼形图
    function createPie(chart) {
        var datale = [];
        //for (var i = 0; i < chart.length; i++) {
        //    datale.push(chart[i].name);
        //}
        $.each(chart, function (i, ele) {
            datale.push(ele.name);
        })
        myChartPie = echarts.init(document.getElementById('pie_charts'));
        option = {
            title: {
                text: '近一个月收票单位排行(Top5)',
                x: 'center',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: datale
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,

                        }

                    },
                    data: chart
                }
            ],
            color: ['#ff5471', '#18476e', '#55a8fd', '#fccd39', '#f89a36']

        };
        myChartPie.setOption(option);

    }