前言
在数据可视化日益重要的今天，ECharts 已成为一个流行且强大的图表库，广泛应用于网页和应用程序中。本文将详细介绍如何在 HTML 中使用 ECharts 图表库，以便开发者能够有效地展示数据。
在html中使用
导入cnd
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
快速使用
yarn add echarts --save import * as echarts from 'echarts'
// 第二个 let chartDom2 = document.querySelector(".bar2 .chart") let myChart2 = echarts.init(chartDom2); let option2 = { title: { text: 'My Chart' }, tooltip: {}, xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, series: [{ name: 'people', type: 'bar', data: [120, 132, 101, 134, 90, 230, 210] }] } myChart2.setOption(option2)
let yearData = [ { year: '2020', data: [ [100, 240, 124, 302, 153, 204, 298], [302, 153, 204, 298, 100, 240, 124,], ] }, { year: '2021', data: [ [204, 298, 200, 240, 124, 302, 153,], [102, 253, 304, 298, 100, 240, 124,], ] }, ];
echarts 的使用
yarn add echarts --save
下载好 之后便可以使用
<template> <div class="data-view"> <el-card> <div id="main1"></div> </el-card> </div> <div class="data-view"> <el-card> <div id="main2"></div> </el-card> </div> </template> <script setup> import * as echarts from 'echarts' import { onMounted } from 'vue'; onMounted(() => { let myChart = echarts.init(document.getElementById("main1")); myChart.setOption({ title: { text: 'My Chart' }, tooltip: {}, xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: {}, series: [{ name: 'people', type: 'bar', data: [120, 132, 101, 134, 90, 230, 210] }] }, ) }) </script> <style scoped lang="scss"> .data-view { width: 100%; display: flex; justify-content: space-between; .el-card { width: 50%; #main1, #main2 { height: 500px; } } } </style>
series: [{ name: 'people', type: 'bar', data: [120, 132, 101, 134, 90, 230, 210] }]
如果使用地图 需要下载依赖
npm install echarts echarts-map
