echarts折现图配置

Posted 2020-11-11 spinoza

js引用和div容器

 1 <div id="container" style="height: 100%"></div>
 2     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
 3     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
 4     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
 5     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
 6     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
 7     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
 8     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
 9     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
10     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script><div id="container" style="height: 100%"></div>
11     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
12     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
13     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
14     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
15     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
16     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
17     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
18     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
19     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

View Code

js配置

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

option = {
    //标题
    title: {
        //文本
        text: ‘折线图堆叠‘
    },
    //本坐标系特定的 tooltip 设定。
    tooltip: {
        //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        trigger: ‘axis‘
    },
    //图例组件。
    legend: {
        //图例数据
        data: [‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘直接访问‘, ‘搜索引擎‘]
    },
    //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
    grid: {
        //grid 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%‘ 这样相对于容器高宽的百分比，也可以是 ‘left‘, ‘center‘, ‘right‘。如果 left 的值为‘left‘, ‘center‘, ‘right‘，组件会根据相应的位置自动对齐。
        left: ‘3%‘,
        //grid 组件离容器右侧的距离。
        right: ‘4%‘,
        //grid 组件离容器下侧的距离。
        bottom: ‘3%‘,
        //grid 区域是否包含坐标轴的刻度标签。
        containLabel: true
    },
    //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
    toolbox: {
        //各工具配置项。
        feature: {
            //保存为图片。
            saveAsImage: {}
        }
    },
    //直角坐标系 grid 中的 x 轴，
    xAxis: {
        //‘category‘ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
        type: ‘category‘,
        //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
        boundaryGap: false,
        //类目数据，在类目轴（type: ‘category‘）中有效。
        data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
    },
    //直角坐标系 grid 中的 y 轴，
    yAxis: {
        //‘value‘ 数值轴，适用于连续数据。
        type: ‘value‘
    },
    //系列列表。每个系列通过 type 决定自己的图表类型
    series: [
        {
            name: ‘邮件营销‘,
            type: ‘line‘,
            //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
            //stack: ‘总量‘,
            //数据
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: ‘联盟广告‘,
            type: ‘line‘,
            //stack: ‘总量‘,
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: ‘视频广告‘,
            type: ‘line‘,
            //stack: ‘总量‘,
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: ‘直接访问‘,
            type: ‘line‘,
            //stack: ‘总量‘,
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: ‘搜索引擎‘,
            type: ‘line‘,
            //stack: ‘总量‘,
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

View Code