echarts快速入门

笔者在初学echarts的时候,非常痛苦, 感觉配置项多如牛毛, 任务又很紧,无法细读文档, 在网上查阅过各种入门文章, 终是不合心意, 于是乎, 写下此文,话不多说直接开整.

柱状图

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width:50%; height:400px;"></div><button class="modefy">修改数据</button><button class="add">增加英语</button><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: "柱状图的测试",textStyle: {color: 'blue',fontSize: 22},left: 60,top: 60},grid: { //网格 配置坐标轴show: true, //显示坐标轴边框borderWidth: 10, //修改坐标轴的宽度borderColor: 'red',left: 100, //修改了边框左上角起始的位置top: 120,containLabel: true // 添加这个属性后, left top 等包括坐标轴上得文字},xAxis: {type: "category", //类目轴data: ['小明', '小红', '小王', '小李'],position: 'top', //可以修改坐标轴所在位置axisLine: { // 设置轴线属性lineStyle: {color: 'green'}},axisLabel: { //设置轴字体属性show: true,textStyle: {color: 'red'  // 修改坐标轴字体颜色}},},yAxis: {type: 'value', //数值轴position: "right", //可以修改坐标轴所在位置splitLine: {  // 去除背景的 y轴网格 x轴同理show: false},axisLine: {// y轴显示show: true},axisTick: {// y轴刻度线显示show: true,inside: false //Y轴刻度 false在Y轴左 true在Y轴右},axisLabel: {inside: true //Y轴标签 false在Y轴左 true在Y轴右}},toolbox: { //工具栏feature: {saveAsImage: {}, //导出图片dataView: {},//数据视图restore: {}, //重置dataZoom: {}, //区域缩放magicType: {type: ['bar', 'line']}// 动态图表类型的切换}},tooltip: { //提示框trigger: 'axis', //触发范围// triggerOn: 'click', // 触发方式//formatter: function (arg) { //自定义提示框//    console.log(arg);//}axisPointer: { //提示框 鼠标移入后的提示type: 'line',z: 0,lineStyle: {width: 66,color: '#2D3443'}}},legend: {  // 图例data: ['语文', '数学'], // 开启图例说明,就是最上方的那两个小的textStyle: {fontSize: 18,//字体大小color: 'green'//字体颜色},icon: 'circle', // 修改图例图标的样式 可以设为base64left: '2%',top: '3%',orient: 'vertical',  // 图例竖着排列align: 'right', //修改图标和字体的相对位置,位置对调// itemGap: 30 //提高图例之间的间距},animation: true,  // 开启动画 (默认是开启动画) animationDuration: function (num) {// 动画时长console.log(num); // 参数是各项出来的顺序return num * 2000},animationEasing: 'bounceOut', //设置一个动画的回弹效果,更多效果看 echarts官网// dataZoom: [  //区域缩放器//     { // x轴//         type: 'slider',//         //type: 'inside' // 内置滑动缩放 //     },//     // { // y轴//     //     type: 'slider'//     // }// ],dataZoom: {show: true,startValue: 1,endValue: 2},series: [{name: '语文',type: 'bar', // 设为 柱状图 ,其余选项 pic line等等barWidth: 22, // 设置柱的宽度markPoint: { //设置最大值最小值显示data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]},markLine: { //设置评价值data: [{type: 'average',name: "平均值"}]},emphasis: {  //选中后变色itemStyle: {color: '#007DFF' // 选中柱颜色}},label: {show: true, //显示每条树状图的数值position: 'top' //设置显示位置},data: [70, 90, 87, 95],itemStyle: {color: {type: 'linear', //线性渐变x: 0,y: 0,x2: 0,y2: 1, //设置方向colorStops: [{offset: 0, color: 'red' // 0%处的颜色为红色},{offset: 1, color: 'blue' //100% 处的颜色为蓝}]},barBorderRadius: [33, 33, 0, 0]}},{name: '数学',type: 'bar',label: {show: true, //显示每条树状图的数值position: 'top' //设置显示位置},data: [90, 97, 99, 88]}]};// 页面变化时myCharts跟着变化,自适应效果window.onresize = () => {myChart.resize()}const modefy = document.querySelector('.modefy')modefy.onclick = () => {var option = {series: [{data: [10, 10, 10, 10]}]}// 增量动画myChart.setOption(option) //setOption 可以多次掉用,数据更新后调用 }const add = document.querySelector('.add')add.onclick = () => {option.series.push({name: '英语',type: 'bar',data: [88, 76, 53, 99]})// 新旧 option 不是覆盖的关系,而是整合的关系myChart.setOption(option)}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>

折线图

<script>const data1Array = randomArray([])const data2Array = randomArray([])const myChart = echarts.init(document.getElementById('main'));const option = {xAxis: {type: "category",data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],boundaryGap: false, //紧挨边缘, 默认为true ,flase为开启,开启之后, 月份位置左移和点对应},yAxis: {type: "value",scale: true //开启之后, 数值轴(y轴)摆脱从0开始},series: [{name: "月份数据",type: 'line',data: data1Array,markArea: { // 给折线图区间内标注阴影data: [[{ xAxis: '1月' }, { xAxis: '2月' }], [{ xAxis: '7月' }, { xAxis: '8月' }]]},smooth: true,//给线条开启平滑显示,symbol: 'none',  //取消折线点圆圈lineStyle: {color: 'green' //修改线条颜色},// itemStyle: { //     normal: {//         color: '#1AB394', // 改变折线点的颜色//         lineStyle: {//             color: '#1AB394' // 改变折线颜色//         }//     }// }// symbol: 'circle', // 折线转折点的样式 (实心)// symbolSize: 5, // 转折点的大小areaStyle: { // 填充风格color: 'green'},stack: 'all' //开启堆叠效果,使用同样的名字,上面的数据依据下面的数据产生堆叠}, {type: 'line',data: data2Array,lineStyle: {color: 'red'},areaStyle: { // 填充风格color: 'red'},smooth: true,//给线条开启平滑显示,stack: 'all'//开启堆叠效果}]}myChart.setOption(option);function randomArray(arr) {for (let i = 0; i <= 12; i++) {const randomNum = (Math.floor(Math.random() * 30) + 1) * 100arr.push(randomNum)}return arr}</script>

散点图

<script>// const data = []// for (let i = 0; i <= 500; i++) {//     data.push()// }const myChart = echarts.init(document.getElementById('main'));myChart.showLoading() // 开启加载动画setTimeout(() => {myChart.hideLoading() // 关闭加载动画}, 2000)const option = {xAxis: {},yAxis: {},series: [{symbolSize: 20, //设置点的大小data: [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.20],[11.5, 7.20],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]],// type: 'scatter'type: "effectScatter", //开启涟漪动画rippleEffect: {scale: 3 //修改涟漪范围},showEffectOn: 'emphasis' //修改涟漪 触发方式 默认 render, emphasis是选中的时候触发}]};myChart.setOption(option);</script>

饼图

<script>const myChart = echarts.init(document.getElementById('main'));const option = {title: {text: "饼图的测试",textStyle: {color: 'blue'}},series: {type: "pie",color: ['red', 'yellow', 'blue', 'green', 'cyan'], // 按顺序使用颜色data: [ // 注意 饼图的数据,必须 使用 name 和 value 两个属性 ,而且饼图不存在 x 和 y 轴{name: '淘宝',value: 11231,itemStyle: {color: 'black' //给某个项单独设置颜色},label: { // 给某个项的文字单独设置颜色color: 'red',position: 'center' // 修改文字的位置},emphasis: { //鼠标移入后产生效果变色itemStyle: {color: "pink"}}},{ name: '京东', value: 22673 }, { name: '唯品会', value: 6123 }, { name: '1号店', value: 8989 }, { name: '聚美优品', value: 6700 }],itemStyle: { // 设置 环形图的圆角和间距borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: true,formatter: function (arg) {return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'},padding: [0, -50],width: 200, // 禁止文本缩略显示 先设 width 再设 overflowoverflow: 'none'},labelLine: {normal: {length: 80,  // 改变标示线的长度lineStyle: {color: "red"  // 改变标示线的颜色}},},// radius: 20, // 饼图的半径// radius: '50%' // 百分比参照的是 宽度或高度较小的那一边来进行百分比设置radius: ['50%', '75%'], // 设置单个参数 "70%" 不用写数组,不然会出现位置bugroseType: 'radius', // 开启南丁格尔 图selectedMode: 'single', // 选中效果  'single' 单选参数  "multiple"多选参数 selectedOffset: 20, // 选中后的偏移量startAngle: 220, // 起始角度emphasis: {label: {show: true},labelLine: {show: false},},center: ['40%', '50%'],  // 设置中心点hoverAnimation: false //关闭鼠标移入后的动画效果}}myChart.setOption(option);</script>

地图


<script>const myChart = echarts.init(document.getElementById('main'));const airData = [{ name: '北京', value: 39.92 }, {name: '天津', value:39.13}, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, {name: '河北', value: 147}, { name: '河南', value: 113 }, {name: '云南',value: 25.04}, { name: '辽宁', value: 50 }, {name: '黑龙江', value: 114}, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, {name: '山东', value: 92}, { name: '新疆', value: 84 }, { name: '江苏', value: 67 },{ name: '浙江', value: 84 }, { name: '江西', value: 96 }, {name: '湖北',value: 273}, { name: '广西', value: 59 }, { name: '甘肃', value: 99 }, {name: '山西', value: 39}, { name: '内蒙古', value: 58 }, {name: '陕西',value: 61}, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, {name: '贵州', value: 71}, { name: '广东', value: 38 }, {name: '青海',value: 57}, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, {name: '宁夏', value: 52}, { name: '海南', value: 54 }, {name: '台湾',value: 88}, { name: '香港', value: 66 }, { name: '澳门', value: 77 }, {name: '南海诸岛', value: 55}]const ScatterData = [{value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度}]$.get('json/map/china.json', (res) => {console.log(res);echarts.registerMap('chinaMap', res) // 切记要先注册const option = {geo: {type: 'map',map: 'chinaMap',  // chinaMap 这个名字必须要和 registerMap 第一个参数的名字保持一致roam: true, //设置允许缩放 以及拖动效果,label: {show: true //显示标签},zoom: 1, // 设置初始的缩放比例,// center: [87.617733, 43.792818] //设置中心点坐标// itemStyle: {//     normal: {//         areaColor: '#3a7fd5'  // 设置地图背景色//         borderColor: '#0a53e9', // 线//         shadowColor: '#092f8f', // 外发光//         shadowBlur: 20//     },//     emphasis: {//         // areaColor: 'red' // 设置移入后的颜色//     }// }},series: [{data: airData,geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起type: 'map'},{data: ScatterData, //配置散点的坐标数据type: "effectScatter",coordinateSystem: "geo",rippleEffect: {scale: 10, //设置涟漪动画的缩放比例brushType: 'stroke' // 设置空心的涟漪动画效果}}],visualMap: { //进行图表配色过滤筛选min: 0,max: 300,inRange: {color: ['white', 'red']},calculable: true}}myChart.setOption(option);// 点击显示信息myChart.on('click', arg => {console.log(arg);})})</script>

雷达图

<script>const myChart = echarts.init(document.getElementById('main'));// 定义一个数据const dataMax = [{ name: "易用性", max: 100 }, { name: "功能", max: 100 }, { name: "拍照", max: 100 }, { name: "跑分", max: 100 }, { name: "续航", max: 100 },]const hwScore = [80, 90, 80, 82, 90]const zxScore = [70, 82, 75, 70, 78]const option = {radar: {indicator: dataMax, //配置雷达图的各项属性和最大值shape/*形状*/: 'circle' //默认:polygon 将雷达图设置为圆形 },series: [{type: 'radar', //类型为雷达图label: {show: true //显示各项指标的数值},areaStyle: {}, //啥都不用填,实现阴影面积data: [{name: '华为手机1',value: hwScore},{name: '中兴手机1',value: zxScore}]}]}myChart.setOption(option);</script>

仪表盘

<script>const myChart = echarts.init(document.getElementById('main'));const option = {series: [{type: 'gauge',data: [{value: 97,itemStyle: { // 指针的样式color: 'pink'}}, // 每一个对象就代表一个指针{value: 85}],min: 50 //min max 控制仪表盘数值的范围}]}myChart.setOption(option);</script>

echarts快速上手相关推荐

Echarts 快速上手柱状图
最简单的柱状图柱状图的series typr 为 bar option = {xAxis:{data:['a','b','c','d','e']},yAxis:{},series:{type: 'b ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...
Echarts开源可视化库学习(一) 介绍与快速上手
介绍 ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
快速上手ECharts，让你的数据不再冷冰！
前言这次博主给大家分享一个既好用又能快速上手的数据可视化库--ECharts. 先来给大家看看它所能呈现出来的效果,你们一定会震撼的! 当然不只是让你们光震撼的,相信看完我的博客,你们每个人都能学会 ...
Apache ECharts下载安装（以GitHub下载源为例） |以及第一个echart图表快速上手
echart下载安装|以及第一个echart图表快速上手 echart官网网站从GitHub下载解压缩,在dist文件夹下找到echarts.min.js 写第一个图标文件结果展示 echart ...
【快速上手mac必备】常用优质mac软件推荐(音视频、办公、软件开发、辅助工具、系统管理、云存储)
本文章的主要内容是我作为一名大四学生.准程序员.up主这三种身份来给大家推荐一下 mac 上好用的软件以及工具.本人也是从去年9月份开始从windows阵营转移到了mac阵营,刚开始使用的时候,也曾主 ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
『转载』Debussy快速上手（Verdi相似）
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
[转载]ESFramework 4.0 快速上手（15）－－客户端登录验证
ESFramework 4.0 快速上手(15) -- 客户端登录验证在之前版本的Rapid引擎中,是没有提供客户端登陆验证的机制的,如果要验证用户的帐号密码信息,我们只有自己手动通过自定义信息来实 ...

echarts快速上手

echarts快速入门

目录

柱状图

折线图

散点图

饼图

地图

雷达图

仪表盘

echarts快速上手相关推荐

最新文章

热门文章