js图表插件Echarts
在制作网页的时候，我们有时会需要制作图表，自己画一个很麻烦，这个时候就可以用到echarts。
echarts
1.下载js文件
使用的时候需要下载echarts的js文件（官网链接），可以去官网下载。
2.导入js文件
就像jQuery一样导入他
<script src="echarts.js"></script>
3.创建一个容器，需要有一个具备宽高的div
先制作一个简易的柱形图
<div id="chart1" style="width: 700px; height: 500px;"></div>
4.实例化一个echarts对象
var myChart = echarts.init(document.getElementById('chart1'));
echarts是一个全局对象
echarts下的 init方法 实例化一个echarts对象
三个参数第一个是dom元素，后面两个可以不用管。
这样实例化一个echarts对象就完成了，后面只要给他配置参数就好了
5.配置参数
echarts实例中有一个函数 setOption 配置图标的参数
setOption
setOption也是有多个参数，我们只管第一个，如果有需要组件合并等功能，可以在设置。
参数一是一个对象，对象里的每一个属性都会影响图表的样式
title，图表的标题
title:{text:'当月销售总额'}
legend图例，可以通过点击图例控制哪些系列不显示
legend:{data:['销售']}
xAxis ,x轴的配置
xAxis:{data:['锤子手机','鞋子','衣服','帽子','裤子','oys','猫','车']}
series可以使用该属性下的type属性设置自己的图表类型，因为是柱形图所以
type:'bar'
barWidth 柱状条宽度
barWidth:40
data 每个商品的数量 要和xAxis ,x轴的配置对应（是一个Array）
data:[5,1,13,2,50,0,59,23]
name系列名称，legend 的图例筛选
//全部配置
myChart.setOption({title:{text:'当月销售总额'},legend:{data:['销售']},xAxis:{data:['锤子手机','鞋子','衣服','帽子','裤子','oys','猫','车']},series:{name:'销售',type:'bar',data:[5,1,13,2,50,0,59,23],barWidth:40}})
效果图：
饼图
饼图和柱形图差不了多少
series下的type属性改为pie就可以了
type:'pie'
不过饼图的数据和柱状图的数据不一样
data:[{value:157,name:'A'},{value:250,name:'B'},{value:340,name:'C'},{value:100,name:'D'},{value:210,name:'E'},]
全部代码演示
myChart2.setOption({title:{text:'饼图'},legend:{data:['访问量']},series:{name:'访问量',type:'pie',data:[{value:157,name:'A'},{value:250,name:'B'},{value:340,name:'C'},{value:100,name:'D'},{value:210,name:'E'},]}})
效果图：
series下的roseType属性
给这个属性设置angle可以让饼图变为南丁格尔图
roseType:'angle'
这种图表形式有时也被称作 「南丁格尔的玫瑰」
南丁格尔自己常昵称这类图为鸡冠花图（coxcomb），并且用以表达军医院季节性的死亡率，对象是那些不太能理解传统统计报表的公务人员。
（如果这篇文章有什么问题请及时联系我！）
js图表插件Echarts相关推荐
- 推荐几个web中常用js图表插件
推荐几个web中常用js图表插件 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart ...
- svg创意手绘风格js图表插件
下载地址 svg创意手绘风格js图表插件.目前该插件支持折线图.饼状图.柱状图和散点图,支持npm安装. dd:
- Vue 使用图表插件 -- Echarts
目前常用的图表插件有: charts Echarts highcharts d3.js 这次根据Vue 项目中 Echarts 的应用记一笔. 安装插件 npm install echarts -S ...
- 强烈推荐几个web中常用js图表插件
文章目录 前言 一.常用js图表 二.图表优选 1.echarts a. - 饼图 b. - 柱状图 使用小结 前言 最近把以前用到一些图表来做数据展示的库写入博客, Js数据图表库有很多都是开源免费 ...
- 【ECharts】百度图表插件ECharts使用
百度ECharts报表呈现组件,挺不错的一个组件 官方网址:http://echarts.baidu.com/ 下载 ECharts http://echarts.baidu.com/download ...
- canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战
H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...
- html图表插件,数据可视化--js图表插件EChart
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
- React中使用图表插件(ECharts)
在React项目中是如何使用ECharts的呢 简单粗暴不多bb 直接上代码 新手上路 不喜勿喷 ECharts文档:https://www.echartsjs.com/zh/option.html# ...
- canvas js 绘图插件_快速入门前端图表插件Echart
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢? 而且黑马的课程大纲已经把canvas课程删掉了,既然canvas有用,为什么要 ...
最新文章
- 基于协同训练的半监督文本分类算法
- 语音增强原理之噪声估计
- c 输出空格_Python编程：案例详解输出函数print
- CSS设置图片的对齐
- nginx添加ssl证书认证
- 计算机系统基础：数字的机器表示
- Educational Codeforces Round 72 (Rated for Div. 2) D. Coloring Edges dfs树/拓扑找环
- 用Markup Validation Service进行网页的W3C标准语法验证(c#)
- 码匠编程：7 个令人兴奋的 JavaScript 新特性
- 自定义View调用onDraw方法
- 用mysql计算年龄lt;gt;,什么是运算符lt; =gt;在MySQL中？
- cesium添加天地图，从环境配置到加载天地图
- java设计模式总结1
- 极客日报：iPhone13系列9月15日正式推出；微信视频号支持发布1小时视频；Firefox 92正式发布
- 移动端ui设计，移动端界面
- ubuntu18.04 台式机无线网卡驱动安装 Tenda U10 rtl8811CU
- proe 5.0 m060安装
- 问题-栈S最多能容纳4个元素，现有6个元素按A、B、C、D、E、F顺序进栈，问可能的出栈顺序。...
- 元认知能力---反思能力
- 目标检测扩散模型DiffusionDet登场，扩散模型正在不同任务中“扩散”