ECharts入门——折线图与柱状图

时间 2021-08-15

标签 html apache echarts ide 工具搜索引擎 spa code 视频 htm 栏目 HTML 繁體版

原文原文链接

为第一次使用ECharts的小伙伴提供参考，废话不对说，直接上代码html

这里主要对两个官网案例进行讲解：apache

https://echarts.apache.org/examples/en/editor.html?c=line-stackecharts

https://echarts.apache.org/examples/en/editor.html?c=bar-backgroundide

echarts.min.js文件下载工具

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello ECharts</title>
</head>
<script src="js/echarts.min.js"></script>
<body>
<div id="line" style="width: 800px;height:400px;"></div>
<div id="bar" style="width: 800px;height:400px;"></div>
</body>

<script> // 折线图 line(); // 柱状图 bar(); function line() { // 获取到对应的div，并实例化echarts对象 var lineChart = echarts.init(document.getElementById("line")); // 指定配置和数据 var option = { title: { text: '折线图堆叠' }, //触发器，移到图上的效果 tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, //图的大小的参数设置 grid: { left: '3%', right: '4%', bottom: '3%', // 防止坐标轴标签溢出 containLabel: true }, // 小工具组件 toolbox: { feature: { saveAsImage: {} } }, xAxis: { // 坐标轴类型，（value数值轴,category类目轴,time时间轴,log对数轴） type: 'category', // 关闭坐标轴两边留白策略 boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', //stack数据堆叠，同个类目轴上系列配置相同的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] } ] }; // 把配置给实例对象 lineChart.setOption(option); } function bar() { var barChart = echarts.init(document.getElementById("bar")); var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', //开启背景色，即单个柱与最高柱的差值的颜色 showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; barChart.setOption(option); } </script>

</html>

附上一张最后的效果图（与官网一致）：搜索引擎