Echarts可视化图表的基本用法

最新推荐文章于 2023-12-19 14:28:58 发布
最新推荐文章于 2023-12-19 14:28:58 发布
阅读量210 收藏 1
点赞数
分类专栏： Echarts
原文链接：https://blog.csdn.net/qq_29073921/article/details/82685421?biz_id=102&utm_term=Echarts&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-82685421&spm=1018.2118.3001.4187
版权

一、引入echarts（有问题请留言）

 

ECharts是由百度打造的一个纯javascript的图标库，很好用。


下载地址：http://echarts.baidu.com/download.html

 

可下载精简版或者完整版

引入js.

<script type="text/javascript" src="echarts-all.js"></script>

 

二、使用echarts

在使用echarts制图之前，首先要定义一个div.

 
<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<!-- 柱状图bar -->

<div id="echarts_bar" style="width: 600px;height:400px;"></div>

<!-- 柱状图line -->

<div id="echarts_line" style="width: 600px;height:400px;"></div>

<!-- 饼状图pie-->

<div id="echarts_pie" style="width: 600px;height:400px;"></div>

<!-- 地图map-->

<div id="echarts_map" style="width: 600px;height:400px;"></div>

</body>

1、柱状图

 
// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('echarts_bar'));


// 指定图表的配置项和数据

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);

2、折线图

 
// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('echarts_line'));


// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'line',

data: [5, 20, 36, 10, 10, 20]

}]

};


// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

 

3、饼状图

 
// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('echarts_pie'));


// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'pie',

data: [5, 20, 36, 10, 10, 20]

}]

};


// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

 

4、中国地图

 
第一步、写入随机数来测试数据：


function randomData() {

return Math.round(Math.random()*500);

}


第二部、写入数据

var mydata = [

{name: '北京',value: '100' },{name: '天津',value: randomData() },

{name: '上海',value: randomData() },{name: '重庆',value: randomData() },

{name: '河北',value: randomData() },{name: '河南',value: randomData() },

{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },

{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },

{name: '安徽',value: randomData() },{name: '山东',value: randomData() },

{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },

{name: '浙江',value: randomData() },{name: '江西',value: randomData() },

{name: '湖北',value: randomData() },{name: '广西',value: randomData() },

{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },

{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },

{name: '吉林',value: randomData() },{name: '福建',value: randomData() },

{name: '贵州',value: randomData() },{name: '广东',value: randomData() },

{name: '青海',value: randomData() },{name: '西藏',value: randomData() },

{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },

{name: '海南',value: randomData() },{name: '台湾',value: randomData() },

{name: '香港',value: randomData() },{name: '澳门',value: randomData() }

];



第三步、实例化option，配置属性，data置入数据

var optionMap = {

backgroundColor: '#FFFFFF',

title: {

text: '全国地图大数据',

subtext: '',

x:'center'

},

tooltip : {

trigger: 'item'

},


//左侧小导航图标

visualMap: {

show : true,

x: 'left',

y: 'center',

splitList: [

{start: 500, end:600},{start: 400, end: 500},

{start: 300, end: 400},{start: 200, end: 300},

{start: 100, end: 200},{start: 0, end: 100},

],

color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']

},


//配置属性

series: [{

name: '数据',

type: 'map',

mapType: 'china',

roam: true,

label: {

normal: {

show: true //省份名称

},

emphasis: {

show: false

}

},

data:mydata //数据

}]

};

//初始化echarts实例

var myChart = echarts.init(document.getElementById('echarts_map'));


//使用制定的配置项和数据显示图表

myChart.setOption(optionMap);

sunwan19941023
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echarts图表可视化
无
10-11 635
开发工具与关键技术： MVC 撰写时间：2021/10/8 下面我们讲Echarts图表可视化是如何实现的： 首先我们需要到Echarts官方网站下载echarts.js文件： 在前端代码中引用echarts.js，然后对图表进行定义和编辑： （1） 在页面中script标签引用echarts.js （2） 我们通常使用div标签作为Echarts可视化的操作对象，以下图为例：在需要展现可视化图表的页面代码位置插入div标签，给定一个特定id，需要给该div标签给定合适的宽高，将依据该宽高渲染可
ECharts数据可视化--常用图表类型
小马哥的博客
03-10 1万+
数据可视化
ECharts地图详解
weixin_30709061的博客
01-03 270
<body> <div class="charts-map-bx"> <div id="charts-map-flow"></div> </div> </body> <script> function flowLoad(){ var option=...
echarts地图map设置dataRange按照数值显示区域颜色
Xiang_Gong_Ya_的博客
12-19 1249
【代码】echarts地图map设置dataRange按照数值显示区域颜色。
echarts 地图各省份区块自定义颜色、提示框格式化数据
Ta曰丿、她活的博客
09-18 6668
一：页面初始化时加载echarts配置信息 var myChart = echarts.init(document.getElementById('chart4')); var tipDate = ""; //份额连续下降预警数据 var option3_2 = { title : { text: '', subtext: '', ...
echarts实现省份地图
weixin_43765747的博客
12-21 7523
以吉林省为例 1.下载json文件 首先获取文件，将省份对应的json文件下载下来放到项目文件中，建议放到public里， 2.引入echarts import * as echarts from 'echarts' 3.准备dom容器 <div id="area"></div> 4.本地发起axios,需要npminstallaxios--saveaxios ，然后引入 import axios from 'axios' import Vue f...
echarts--map ,地图显示、通过dataRange 动态改变地图上线的颜色，还没实践
Starlahi的博客
07-09 5439
function getEcharts(end_obj,pointsdata,linedata){ // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径 require.config({ paths: { echarts: './js' .
echarts可视化图表 - 大数据
07-12
【标题】“echarts柱状图可视化图表 - 大数据” 这是一个使用大数据生成的柱状图可视化图表。 【描述】“柱状图可视化图表 - 大数据” 是一个数据可视化工具，它使用大数据集来生成柱状图。柱状图是一种常见的数据...
所用技术：Flask框架+Python爬虫+echarts可视化图表+MySQL数据库
04-16
操作简单，里面有使用方法的文档，按照文档即可运行 可以私信博主，博主免费指导运行
基于JavaScript的echarts数据可视化大屏设计源码
03-28
ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用于数据可视化领域。本项目提供了一套完整的ECharts数据可视化大屏设计源码，包括45个文件，涵盖了JavaScript、CSS和HTML技术...
Echarts数据可视化通用模板
07-04
Echarts是一款基于JavaScript的数据可视化库，它为开发者提供了丰富的图表类型和强大的交互功能，使得创建动态、交互式的数据可视化变得更加简单。在这个"Echarts数据可视化通用模板"中，我们可以看到一系列针对不同...
基于ECharts数据可视化大屏案例源码
12-03
ECharts是一款由百度开源的、基于JavaScript的...通过学习这个基于ECharts的大屏案例源码，开发者不仅能掌握ECharts的基本使用方法，还能深入了解其在大数据可视化场景中的高级应用，提高数据展示的交互性和专业性。
数据可视化使用
小元子
04-02 1157
npm i echarts -s 可以全局和按需使用 main js里面使用 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 直接使用： 需要先创建容器 <div id="main" style="width:600px;height:400px"></div> 然后使用 this.$echarts.init(document.getElementById('main')) ..
【图表利剑】开发复杂Echarts时，visualMap视觉组件中属性seriesIndex必须用起来
追寻上飞的博客
12-02 2722
据说90%的可视化是用Echarts开发，没错，笔者也没例外，在新的开发项目中，遇到了这个开发神器Echarts，想要的功能就是在省份上显示。原来的功能已有范围视觉组件visualMap。
vue使用echarts显示中国地图
一入前端深似海
09-11 2万+
到这就完成了中国地图绘制，就可以看到文章顶部效果图，具体参数配置根据个人可以更改。引入一个公共js文件（下面这段代码就是china.js文件）下面介绍一个方法如何用echarts画一个中国地图，如图。左侧图例加上单位的写法，替换掉原有的 splitList。项目引入echarts以后，在页面创建canvas标签。使用地图的页面引入上面的公用Js！2022/5/5 特别补充，2022/5/5 追加补充。
echarts各个配置项详细说明总结
法海你不懂爱
04-20 5万+
echarts各个配置项详细说明总结最近有个朋友在做关于各种图表的项目，用到了echarts,关于各个配置项刚开始用好多都不懂，有些地方需要改不知道改哪个参数，就在网上查了各种，找到了一个不错的总结，分享给大家。（echarts官网也有配置项说明文档。）theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色
ECharts使用心得
热门推荐
xuemoyao的专栏
11-16 34万+
ECharts使用心得 前言 上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。 1.    插件的下载
华为智慧城市成功案例集
最新发布
08-29
华为智慧城市成功案例集
用echarts可视化图表怎么实现
06-06
ECharts 是一款基于 JavaScript 的开源可视化图表库，支持多种类型的图表，如折线图、柱状图、饼图等。下面简单介绍一下使用 ECharts 实现可视化图表的步骤： 1. 引入 ECharts 库 在 HTML 文件中引入 ECharts 库，可以从官网下载或使用 CDN 引入。例如： ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 2. 准备数据 准备需要展示的数据，可以是数组、对象等形式。例如： ```javascript const data = [ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 150 }, { name: '深圳', value: 180 } ]; ``` 3. 创建容器 在 HTML 文件中创建一个容器，用于展示图表。例如： ```html <div id="chart" style="width: 600px; height:400px"></div> ``` 4. 初始化图表 在 JavaScript 文件中获取容器对象，并使用 ECharts 的 `init` 方法初始化图表。例如： ```javascript const chart = echarts.init(document.getElementById('chart')); ``` 5. 配置图表 使用 ECharts 的配置项配置图表，如设置图表类型、数据、颜色、样式等。例如： ```javascript const option = { title: { text: '城市销售情况' }, tooltip: {}, xAxis: { data: data.map(item => item.name) }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: data.map(item => item.value), itemStyle: { color: '#3398DB' } }] }; ``` 6. 渲染图表 使用 ECharts 的 `setOption` 方法渲染图表。例如： ```javascript chart.setOption(option); ``` 完整的代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Demo</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height:400px"></div> <script> const data = [ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 150 }, { name: '深圳', value: 180 } ]; const chart = echarts.init(document.getElementById('chart')); const option = { title: { text: '城市销售情况' }, tooltip: {}, xAxis: { data: data.map(item => item.name) }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: data.map(item => item.value), itemStyle: { color: '#3398DB' } }] }; chart.setOption(option); </script> </body> </html> ``` 这是一个简单的柱状图示例，实际上 ECharts 还支持更多类型的图表和更多的配置项。需要根据实际需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值