Echarts可视化图表的基本用法

最新推荐文章于 2023-12-19 14:28:58 发布
最新推荐文章于 2023-12-19 14:28:58 发布
阅读量201 收藏 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地图详解
weixin_30709061的博客
01-03 247
<body> <div class="charts-map-bx"> <div id="charts-map-flow"></div> </div> </body> <script> function flowLoad(){ var option=...
echarts的基本用法——未完待续
高数老师的博客
09-13 1万+
此处是目录 一、引入echarts（有问题请留言） 二、使用echarts 1、柱状图 2、折线图 ​3、饼状图 ​4、中国地图 一、引入echarts（有问题请留言）   ECharts是由百度打造的一个纯javascript的图标库，很好用。 下载地址：http://echarts.baidu.com/download.html   可下载精简版或...
Echarts遇到问题（二）
L_Mr_ll的博客
05-03 322
使用Echarts时弄一个中国地图展示数据，但是中国地图死活线束不出来，后来百度了几个小时才发现是引入的文件有问题 话不多说，上代码： //之前导的是echarts.min.js文件，改成echarts.js后没问题 <script type="text/javascript" src="echarts/echarts.js" ></script> <script t...
uni-app 封装echarts地图组件 实现地图二级下钻
qq_45511353的博客
01-25 1837
uni-app 封装echarts地图组件 子组件： 已实现功能：实现地图下钻，跳到省级地图。 <template> <view class="content" style="touch-action:none;"> <button type="default" style="width: 90upx;height: 60upx;font-size: 24upx;padding: 0;margin-left:20upx ;" @click="echarts.showChi
所用技术：Flask框架+Python爬虫+echarts可视化图表+MySQL数据库
04-16
操作简单，里面有使用方法的文档，按照文档即可运行 可以私信博主，博主免费指导运行
Echarts可视化工具的使用案例（idea）
11-12
Echart可视化工具的简单实用，本文章采用idea开发环境进行案例实施，运用到javaEE、ajax、serverlet技术
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip
12-28
基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip 【功能特点】 页面内容适应各种比例的大屏。可以设置为自动等比例缩放(contain和cover两种模式)，也可以设置为拉伸(stretch模式)来铺满...
开源可视化图表库ECharts的使用示例项目（Vue2.x+Axios+ECharts）
10-20
1.内容概要：开源可视化图表库ECharts的使用积累示例项目，基于Vue2.x+Axios+ECharts构建，可以配合小编的专栏-ECharts图表库阅读使用。 2.使用方法：项目代码下载后，使用VSCode打开，新建终端（运行指令启动项目）...
echarts实现省份地图
weixin_43765747的博客
12-21 7343
以吉林省为例 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 5325
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中visualMap组件详解（含注释）
热门推荐
刺心的博客
04-01 2万+
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlph...
echarts地图map设置dataRange按照数值显示区域颜色
最新发布
Xiang_Gong_Ya_的博客
12-19 943
【代码】echarts地图map设置dataRange按照数值显示区域颜色。
数据可视化使用
小元子
04-02 1143
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 2569
据说90%的可视化是用Echarts开发，没错，笔者也没例外，在新的开发项目中，遇到了这个开发神器Echarts，想要的功能就是在省份上显示。原来的功能已有范围视觉组件visualMap。
使用echarts实现地图展示
柠檬不萌只是酸i
07-05 5131
先来看下结果展示： 下面来看下代码：【引入china.js 以下代码可直接运行】 China.js文件的下载地址：https://github.com/liangrumeng2015/China.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue使用echarts显示中国地图
一入前端深似海
09-11 2万+
到这就完成了中国地图绘制，就可以看到文章顶部效果图，具体参数配置根据个人可以更改。引入一个公共js文件（下面这段代码就是china.js文件）下面介绍一个方法如何用echarts画一个中国地图，如图。左侧图例加上单位的写法，替换掉原有的 splitList。项目引入echarts以后，在页面创建canvas标签。使用地图的页面引入上面的公用Js！2022/5/5 特别补充，2022/5/5 追加补充。
用echarts可视化图表怎么实现
06-06
下面简单介绍一下使用 ECharts 实现可视化图表的步骤： 1. 引入 ECharts 库 在 HTML 文件中引入 ECharts 库，可以从官网下载或使用 CDN 引入。例如： ```html <script src="https://cdn.jsdelivr.net/npm/echarts...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值