echart的基本使用方法

https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js

1.点击下载echart.js文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 步骤1：引入echarts.js文件 --><script src="lib/echarts.min.js"></script><!-- 步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象-->
</head><body><!-- 步骤2：准备一个呈现图表的盒子 --><div style="width: 600px;height: 400px"></div><script>// 步骤3：初始化echarts实例对象// 参数, dom,决定图表最终呈现的位置var mCharts = echarts.init(document.querySelector('div'))// 步骤4：准备配置项var option = {xAxis: {type: 'category',//category指明x轴为类目轴data: ['小明', '小红', '小王']},yAxis: {type: 'value'//value指明y轴为 数值轴, 指明数值轴之后, 无需指定data},series: [{name: '语文',type: 'bar',data: [70, 92, 87]}]}// 步骤5：将配置项设置给echarts实例对象//5个步骤除了option需要自己配置其他都是固定步骤 配置option参考echart官网！！！mCharts.setOption(option)</script>
</body></html>

2.项目中常用的echart配置

const options = {grid: {// 柱状图位置top: '15px',left: '0',right: '0',bottom: '10px',containLabel: true},dataZoom: {type: 'inside'//隐式滚动条：即不显示滚动条，通过鼠标滚动来缩放缩放柱形图间距，来查看所有的柱形图/**显示滚动条，可设置其显示位置，滚动条开始位置、结束位置，宽，高等*/// show: true,// realtime: true,// bottom: '2px',// left:'20px',// right:'20px',// height: 8,// start:0,// end:100,// textStyle:{//   color: '#fff'// }},tooltip: {// 鼠标滑上去显示效果trigger: 'axis',// formatter : function(params){// var res = 'success';  //可以在这个方法中改变鼠标滑上去显示的内容// return res;// },// axisPointer : {            // 坐标轴指示器，坐标轴触发有效//     type : 'line'        // 默认为直线，可选为：'line' | 'shadow'// }},xAxis: {name:'PH',//横轴名称type: 'category',boundaryGap: false,color: '#fff',data: xdata,axisLabel: {//横轴标签样式设置show: this.queryType==2?true:false,//控制标签显示interval:0,textStyle: {color: '#fff', // 更改坐标轴文字颜色fontSize: 10// 更改坐标轴文字大小},// formatter:function(value,index) {//设置横轴坐标文字每行显示个数，超出换行//   var ret = "";//拼接加\n返回的类目项//   var maxLength = 10;//每项显示文字个数//   var valLength = value.length;//X轴类目项的文字个数//   var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数//   if (rowN > 1)//如果类目项的文字大于3,//   {//     for (var i = 0; i < rowN; i++) {//       var temp = "";//每次截取的字符串//       var start = i * maxLength;//开始截取的位置//       var end = start + maxLength;//结束截取的位置//       //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧//       temp = value.substring(start, end) + "\n";//       ret += temp; //凭借最终的字符串//     }//     return ret;//   }//   else {//     return value;//   }// }},axisLine: {// x轴样式show: true,lineStyle: {color: 'rgba(242,242,242,.2)',width: 1,type: 'solid'}}// ,axisTick: {length:220}},yAxis: {type: 'value',axisLabel: {textStyle: {color: '#fff', // 更改坐标轴文字颜色fontSize: 12// 更改坐标轴文字大小}},axisLine: {// x轴样式show: true,lineStyle: {color: 'rgba(242,242,242,.2)',width: 1,type: 'solid'}},splitLine: {// 格线样式lineStyle: {color: 'rgba(242,242,242,.2)'}}},series: [{data: ydata,type: 'line',//折线图showAllSymbol:true,//显示所有折线点symbol:(val,param)=>{//根据值判断点是否显示以及点的显示类型if(this.queryType==1){if(param.dataIndex%4==0){return 'emptyCircle'}else{return 'none'}}return 'emptyCircle'}, //折线点设置为实心点symbolSize: 12, // 折线点的大小showBackground: true,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'},areaStyle: {},itemStyle: {// 柱样式normal: {label:{// show:true,color: '#fff'},lineStyle: {color: '#16B7FF', // 折线的颜色width: 2,type: 'solid'// 'dotted'虚线 'solid'实线},borderColor: '#1EB0FC',color: new echarts.graphic.LinearGradient(//折线显示颜色，可设置渐变色0, 0, 0, 1,[// {offset: 0, color: '#44F0FF'},{ offset: 0, color: '#42E9F8' },{ offset: 0.7, color: '#122C45' },{ offset: 1, color: '#021132' }]),opacity: 1}}}]}

echart的基本使用方法相关推荐

Echart之地图使用方法及问题，地图大小和占比
Echart之地图使用方法及问题,地图大小和占比 1.到官网下载地图的js和json文件地址 http://echarts.baidu.com/download-map.html 2.上代码,数据 ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
EChart中使用地图方式总结（转载）
EChart中使用地图方式总结 2018年02月06日 22:18:57 来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772 ...
vue制作echart图表随着画面等比例放大缩小
因为本身echart做的图表不会随着div的大小比例进行变化,因此下面介绍两种控制echart大小变化的方法. 第一种:根据屏幕分辨率变化切换echart图表的大小变化在mounted中添加监听事件 ...
Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
html人头小图标,echart 人头
本文将为您描述echart 人头,具体实现方法: import { mapState } from "vuex"; import echarts from "@/util ...
5 ui自适应窗口_Qt编写地图综合应用5-自适应拉伸
一.前言用过echart的人都会遇到一个问题,就算是代码中写了window.onresize = echart.resize,也只是横向自适应拉伸填充页面,垂直方向不会变化,除非指定高度才可以,这就 ...
backbone.js_架构介绍
时间:2018年6月份~2019年2月份前端框架:backbone.js 一.前因后果 18年6月份,进入了南京一家华为外包公司,做JAVAWeb 项目的开发,在原来的公司都是用的封装的比较完善的框 ...
【生成PDF】Java如何根据前台Echarts图表生成PDF，并下载
文章目录前言一.如何通过java代码生成PDF? 1.依赖二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...
Qt/C++编写地图综合应用5-自适应拉伸
一.前言用过echart的人都会遇到一个问题,就算是代码中写了window.onresize = echart.resize,也只是横向自适应拉伸填充页面,垂直方向不会变化,除非指定高度才可以,这就 ...

echart的基本使用方法

echart的基本使用方法相关推荐

最新文章

热门文章