echarts
关注
分享
扫一扫
wu_223
哈喽，大家好，我是一名web前端开发工程师，主用框架angular2以上，涉及的技术以地图leaflet方面居多，写的博客是在开发中遇到的问题，欢迎大家随时找我讨论
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
echarts x轴文字竖着正文字
echarts 柱状图x轴竖着正文字原创 2022-08-29 10:33:56 · 1134 阅读 · 0 评论 -
echarts 环形图，饼图，中间文字设置，数据块文字设置，图例的设置 , 饼图中间白条添加，饼图边框添加
1. 如下图所示：2. 环形图代码如下 vue引入echarts：https://blog.youkuaiyun.com/qq_34790644/article/details/119932743 1. 中间字设置是 title ,数据内部显示文字是series中的label,图例是legend var sxechart=this.$echart.init(document.getElementById('echartId')) va...原创 2021-08-30 16:55:11 · 22456 阅读 · 0 评论 -
echarts a,b,c,d 分别表示跟用法
图如下展示： 解释如下：折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无） 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无） 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比） 弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)用法解释 ( 饼图 )： 1. 数据为 var data = [ ...原创 2021-08-30 16:21:50 · 3594 阅读 · 2 评论 -
vue 引入echarts报错Cannot read property ‘init‘ of undefined
1. 首先先安装echartsnpm install echarts2. main.js引入 把importechartsfrom'echarts' 改成如下即可import * as echarts from 'echarts'Vue.prototype.$echarts = echarts3. 调用<div class="echart" ref="echartId"></div> var myChart = this.$ech...原创 2021-08-26 15:35:05 · 699 阅读 · 1 评论 -
echarts折线图点击更改拐点样式
1. 如下图所示： 2. 代码如下：var ydata = [5.2, 6.5, 4.9, 5.8, 7, 6, 7.2, 8.3, 7.1, 5, 7, 9];var xData = (function () { var data = []; for (var i = 1; i < 13; i++) { data.push(i + '月'); } return data; })...原创 2021-07-15 16:26:14 · 1835 阅读 · 3 评论 -
echarts name值重复，怎么显示（showName或者加id的方法)（本文推荐第二种方法，加id）
1. 用echarts的showName来实现，效果如下图所示：，代码可以直接放到echarts官网测试： echarts官网：https://echarts.apache.org/examples/zh/index.html 代码如下图所示： xydata = [[2, 4], [6, 7], [0, 1], [1, 2], [2, 7], ...原创 2020-06-29 15:42:44 · 6335 阅读 · 0 评论 -
echarts+(html+js+css)左边列表，拖拽到右边生成流程树
效果如下图所示：（左边拖动到右侧，可添加跟删除等操作，最后进行提交）1. 本文依附echarts，所以需要去引入echart.min.js, 官网下载地址:https://echarts.apache.org/zh/download.html2. html代码：（本文是angular6+UI框架ng-zorro,也可自己手写样式）<nz-layout> <div nz-row class="titlek"> 新建流程 &...原创 2020-06-09 15:33:20 · 1958 阅读 · 0 评论 -
echarts 数值过大，有些数据会显示不全，log
1. 效果图如下所示：改之前： 改之后： 2. 代码如下：只需要把需要的x轴或者y轴：type:"log"，就行 var option = { tooltip: { trigger: 'axis', axisPointer: { type: 's...原创 2019-05-27 12:10:16 · 10993 阅读 · 13 评论 -
echart相关操作xAxis,yAxis,series,grid,(包括x轴样式，y轴样式，折现样式，网格样式，折现阴影，折线上方显示数据，x轴文字倾斜，图例，标题， tooltip文字自定义)
样式截图大概如下：1. x，y轴相关操作：xAxis，yAxis (1) x，y轴的颜色： axisLine: { lineStyle: { color: '#2898e5', }, }, (2...原创 2019-05-16 15:49:52 · 22869 阅读 · 8 评论 -
关于做angular引入echarts图表、时间轴
1. echarts图： 1> 首先在项目中需要安装一下npm install echarts --save 2> 然后再引入到项目angular.json的scripts中 "scripts": [ "node_modules/echarts/dist/echarts.min.js", ...原创 2018-03-27 12:11:18 · 2416 阅读 · 0 评论 -
echarts 饼图以及图例的位置及大小，环图中间字
1. 如下图所示，图的位置大小以及图例的位置： 2. 代码如下图所示：legend位置（图例位置），radius大小（图大小），center位置（图位置） var option = { title: { text: '', subtext: '', x: 'center' }...原创 2019-04-15 11:40:38 · 62655 阅读 · 14 评论