Apache ECharts简述

最新推荐文章于 2024-06-23 09:30:00 发布

秋书一叶

最新推荐文章于 2024-06-23 09:30:00 发布

阅读量272

点赞数 4

文章标签： apache echarts 前端

本文链接：https://blog.csdn.net/qq_51137480/article/details/136642837

版权

本文介绍了ApacheECharts，一个基于JavaScript的开源图表库，如何通过npm安装和在HTML中引入。给出了两个使用案例，包括线性图和区域图的创建，并指向了官方文档以供进一步学习。

摘要由CSDN通过智能技术生成

Apache ECharts

Apache ECharts 是基于 JavaScript 的开源可视化图表库，它可以将数据渲染成图表

1.安装

npm install echarts --save

2.引入

main.js中引入（此处展示的为5.X的引入，4.X的引入应改为import echarts from ‘echarts’）

import * as echarts from 'echarts'

3.使用案例

div /

<div style="display: flex;flex-wrap: wrap;">
	<div id="eChartsId1" style="width: 900px; height: 600px;"></div>
	<div id="eChartsId2" style="width: 900px; height: 600px;"></div>
</div>

JavaScript / methods

import * as echarts from 'echarts';

//省略其它代码......

		tb() {
		//指定图表渲染位置
            let myChart = echarts.init(document.getElementById("eChartsId1"));
            myChart.setOption({
                title: {
                    text: "ysd",
                    fontSize: 24,
                    left: '10%'
                },
                //x轴
                xAxis: {
                    name: 'a',
                    data: ['A', 'B', 'C', 'D', 'E', 'F']
                },
                //y轴
                yAxis: {
                    name: 'b',
                },
                series: [
                    {
                        name: 'yyy',
                        data: [16, 22, 28, 23, 32, 28],
                        type: 'line',
                        stack: 'line1',
                        smooth: true
                    },
                    {
                        name: 'sss',
                        data: [15, 15, 23, 25, 18, 28],
                        type: 'line',
                        stack: 'line2',
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                }
            });
            let myChart1 = echarts.init(document.getElementById("eChartsId2"));
            myChart1.setOption({
                xAxis: {
                    data: ['A', 'B', 'C', 'D', 'E']
                },
                yAxis: {},
                series: [
                    {
                        name: 'ddd',
                        data: [10, 22, 28, 23, 19],
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: 'lightblue',
                            opacity: 0.5
                        }
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    }
                }
            });
        }