eharts入门篇一

1.导入文件样式

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。

2，引入 ECharts 文件 

<scprpt src="echarts.min.js"></script>

3.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。(注意必须要给宽，高)

<div style="width:400px;height:500px;"></div>

4,初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

5,然后就可以从echart官网复制想要的图放进去，底部调用

 

二.今天主要讲的是折线图各种属性修改：

先看修改过样式的

<script type="text/javascript">
    function showLine(line) {
        var pie = echarts.init(document.getElementById('line-chart'));
        option = {
            title: {
                text: '某楼盘销售情况',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['富德保险', '中国人寿', '其他'],//三条线
            },
            toolbox: {
                show: true,
                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',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月', '10月', '11月','12月'],//x轴的label名
                    axisLabel: {textStyle: {fontSize: 16, color: '#fff'}},//x轴的label的文字颜色，大小
                    splitLine:{show:false},//x轴的网格线是否显示
                    axisLine: {//x轴的线的设置颜色和宽度
                        lineStyle: {
                            color: '#0b2759',
                            width: 3,//这里是为了突出显示加上的，可以去掉
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {textStyle: {fontSize: 16, color: '#fff',}},
                    splitLine:{show:true,lineStyle:{color:"#32528a"}},
                    axisLine: {
                        lineStyle: {
                            color: '#0b2759',
                            width: 8,//这里是为了突出显示加上的，可以去掉
                        }
                    },
                }
            ],
            series: [
                {
                    name: '富德保险',//
                    type: 'line',
                    smooth: true,
                    itemStyle: {//富德这条折线的颜色，区内颜色设置
                        normal: {
                            color: '#6e5a1c',
                            lineStyle: {color: '#c59b0d'},
                            areaStyle: {type: 'default'}
                        }
                    },

                    data: [10, 12, 21, 54, 260, 830, 710,89,123,45,23,88]//富德折线的数据
                },
                {
                    name: '中国人寿',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#085c45',
                            lineStyle: {color: '#00b763'},
                            areaStyle: {type: 'default'}
                        }
                    },
                    axisLabel: {textStyle: {fontSize: 16, color: '#fff'}},
                    data: [30, 182, 434, 791, 390, 30, 10,1,2,45,35,1188]
                },
                {
                    name: '其他',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#669866',
                            lineStyle: {color: '#c6c6c6'},
                            areaStyle: {type: 'default'}
                        }
                    },
                    axisLabel: {textStyle: {fontSize: 16, color: '#fff'}},//1，x轴的label文字如：1月，2月字体颜色大小修改
                    data: [1320, 1132, 601, 234, 120, 90, 20,10, 12, 21, 54, 260]//
                }
            ]
        };
        pie.setOption(option);
    }

    showLine('上海');
    map.on('click', function (params) {
        line = params.name;
        showLine(line);
    });
</script>