echarts回顾之基本使用一_echarts jar-优快云博客

一，下载echarts相关jar包

此处采用js文件自定义下载:
在这里插入图片描述
在构建页面选择完所需模块之后，选择下载：

二，基础概念series

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）…
在这里插入图片描述

三，官方demo


```html
   <div id="bar" style="width: 600px;height: 400px;"></div>

<script>
    $(function () {
        initDemo();
    })

    function initDemo() {
        var myChart = echarts.init(document.getElementById('bar'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

三，样式之基本定位

left,bottom等定位都是对元素进行定位

//图形颜色设置
color:["#EE6666"],
//yAxis：对y轴进行相关设置
 yAxis: {splitNumber :2, //y轴分割刻度值，但是echarts会根据y轴的值计算
         maxInterval:60,//y轴最大分割值(刻度值),但是如果超出设置大小，echarts会自动计算
            },
series: [{//饼状图
                name: '销量',
                type: 'pie',
                data: [5, 20, 36, 10, 10, 20],
                width:"17%",//宽，
                left:"40%",//距左边
                bottom:"66",//距离底部66像素，left,top等定位都是绝对定位(position: absolute)
                center: ["43%", "43%"],//采用中心点方式定位，也就是以中心点为坐标[x轴,y轴]移动
                radius: ["14%", "49%"]//["中心点大小","外圈饼状图大小"]
            }]

四，坐标系：

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。

var echart=echarts.init(document.getElementById("xyAxis"));
        var colors = ['#5470C6', '#91CC75', '#EE6666'];

        option = {
            color: colors,

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['蒸发量', '降水量', '平均温度']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [//定义三个y轴
                {
                    type: 'value',
                    name: '蒸发量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '降水量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    offset: 80,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '蒸发量',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '降水量',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '平均温度',
                    type: 'line',
                    yAxisIndex: 2,//yAxisIndex:指定数据是属于哪一个y轴，根据集合索引指定
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        echart.setOption(option);

五，简单数据动态交互

页面：

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

        $.get('/basic/getListData').done(function (data) {
            console.log("data:"+data);
            myChart.setOption({
                title: {
                    text: '动态数据'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data:data.week
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: data.data
                }]
            });
        });

接口：

 @RequestMapping("getListData")
    @ResponseBody
    public Map<String,Object> getDataArr(){
        Map<String, Object> map = new HashMap<>();
        List<Integer> arrayList = new ArrayList<>();
        arrayList.add(5);
        arrayList.add(15);
        arrayList.add(8);
        arrayList.add(31);
        arrayList.add(24);
        map.put("data",arrayList);
        String [] week={"周一","周二","周三","周四","周五",};
        map.put("week",week);
        return map;
    }