html中echarts的快速使用

为了对文本分析结果进行丰富的多角度的呈现，我们通常需要用到各种各样的图表来更加形象具体地进行数据对比或者展示。

实际上，在这方面，网上有相当多地资源可供使用，比较有名地是echarts，d3等网站。

今天就如何快速使用echarts来在网页上展示数据进行简单地总结。

1.引入相应的js文件

包括echats.js或者echarts.min.js中的一个文件。也可以自定义相关的样式或者动态效果的文件。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>全面二孩政策 | 数据新闻报道</title>
  <script src="js/echarts.min.js"></script>
  <link rel="stylesheet" href="dist/css/bootstrap.min.css">
  <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style_static_pages.css">
</head>

2.初始化普通图表

1.在<body>中先声明图表将要位于的div

<div id="chart11" style="width: 750px; height: 400px;margin: 20px auto;"></div>

2.插入<script>标签插入图表。

<script type="text/javascript" src="js/echart11.js"></script>

（本例中每一个具体的的js文件在<body>标签内的末尾添加）

3.在js文件中对配色、尺寸、位置等信息进行修改和配置

/* 出生率、死亡率、增长率折线图 */
var dom = document.getElementById("chart11");
var myChart = echarts.init(dom);
var app = {};
app.title = '折柱混合';
option = {

    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['出生率‰','死亡率‰','增长率‰']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['1955','1960','1965','1970','1975','1980','1985','1990','1995','2000','2005','2010','2015']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'出生率‰',
            type:'line',
            data:[32.6,20.86,37.88,33.43,23.01,17.82,18.21,17.8,21.06,17.12,14.03,12.4,11.9,12.07]
        },
        {
            name:'死亡率‰',
            type:'line',
            data:[12.28,25.43,9.5,7.6,7.32,6.21,6.34,6.57,6.67,6.57,6.45,6.51,7.11,7.11]
        },
        {
            name:'增长率‰',
            type:'line',
            data:[20.32,-4.57,28.38,25.83,15.69,11.61,11.87,11.23,14.39,10.55,7.58,5.89,4.79,4.96]
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

综上，echarts就可以在网页中正常使用了

html中echarts的快速使用

猜你喜欢