- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="main" style="width: 600px;height: 400px;">
- <!-- 一个条形图 -->
- </div>
- <div id="chart2" style="width: 700px;height: 500px;">
- <!-- 多个条形图 -->
- </div>
- <script src="js/echarts.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- var myEchart = echarts.init(document.getElementById(main));
- var myEchart2 = echarts.init(document.getElementById(chart2));
- var option = {
- title: {
text: 堆叠区域图,
- show: true
- },
- xAxis: {
- type: category,
- data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
- },
- yAxis: {
- type: value,
name: 金额,
- axisLabel: { // 设置 y 轴的数据格式
- formatter: function(value) {
- let mun = value / 1000
- return mun + k
- }
- }
- },
- series: [{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: line,
- // 设置图形
- smooth: true,
- // 平滑线条图
- /*areaStyle: {color: #999},// 设置面积 */
- // 设置图形, 字体的颜色, 显示数据和位置
- itemStyle: {
- normal: {
- color: #3580B8,
- label: {
- show: true,
- position: top
- }
- }
- }
- }]
- };
- var option2 = {
- // 标题
- title: {
text: 堆叠区域图
- },
- // 提示框
- tooltip: {
- trigger: axis,
- // 提示框类型
- axisPointer: { // 鼠标经过显示条
- type: line,
- label: {
- backgroundColor: #6a7985
- }
- }
- },
- // 可以通过点击图例控制哪些系列不显示
- legend: {
data: [邮件营销, 联盟广告, 视频广告, 直接访问, 搜索引擎],
- // 图例项标题
- icon: rect,
- // 图例项的 icon
- },
- // 切换图形条
- toolbox: {
- feature: {
- saveAsImage: {},
- // 导出为 png 图
- magicType: { // 切换图形条类型
- type: [line, bar, stack, tiled]
- }
- }
- },
- // 调整图的位置
- grid: {
- left: 3 % ,
- // 距离左边的位置
- right: 4 % ,
- bottom: 3 % ,
- containLabel: true // 防止标签溢出
- },
- // x 轴
- xAxis: [{
- type: category,
- // 多种
- boundaryGap: false,
data: [周一, 周二, 周三, 周四, 周五, 周六, 周日]
- }],
- // y 轴, 显示数字
- yAxis: [{
- type: value
- }],
- // 设置多个相同对象, 显示多个图形条
- series: [{
name: 邮件营销,
type: line,
stack: 总量,
- // 数据堆叠, 同个类目轴上系列配置相同的 stack 值后, 后一个系列的值会在前一个系列的值上相加
- areaStyle: {
- normal: {}
- },
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
name: 联盟广告,
type: line,
stack: 总量,
- areaStyle: {
- normal: {}
- },
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
name: 视频广告,
type: line,
stack: 总量,
- areaStyle: {
- normal: {}
- },
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
name: 直接访问,
type: line,
stack: 总量,
- areaStyle: {
- normal: {}
- },
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
name: 搜索引擎,
type: line,
stack: 总量,
- label: {
- normal: {
- show: true,
- position: top
- }
- },
- areaStyle: {
- normal: {}
- },
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }]
- };
- // 实例化, vue 使用, 当数据更新的时候再一次实例化
- myEchart.setOption(option);
- myEchart2.setOption(option2);
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2497175.html