echarts
echarts
熟悉有你的地方
这个作者很懒,什么都没留下…
展开
-
Echarts之水库水位
echarts版本:4.8.0效果图:实现:<template> <div id="chart" style="width: 480px; height: 650px; background: #020f2b" ></div></template><script>export default { data() { return {}; }, created() {}, mounted(原创 2021-09-29 11:28:01 · 2750 阅读 · 2 评论 -
Echarts之饼图鼠标移入突出高亮
Echarts版本:4.8.0,鼠标移入饼图时突出高亮,主要在series里配置需求:鼠标移入:实现:<template> <div id="pie-highlight" style="width: 700px; height: 300px; background: #020f2b" ></div></template><script>export default { data() { re原创 2021-08-13 16:08:13 · 4972 阅读 · 0 评论 -
Echarts之横向柱状图椭圆背景颜色
Echarts的 v5.x 版本提供了属性支持椭圆背景,但是 v5.x 版本之前是不支持的,解决方式:设置两条柱状图重叠在一起即可需求:鼠标移入:原创 2021-07-25 10:19:27 · 2921 阅读 · 0 评论 -
Echarts之仪表盘式进度条
需求:实现:<template> <div class="progress" style="width: 300px; height: 400px; background: rgba(2, 15, 43, 0.7)" > <div id="progressChart" style="width: 300px; height: 400px"></div> <div class="rank">原创 2021-05-15 12:44:51 · 3930 阅读 · 2 评论 -
Echarts之饼图内外圆重叠且图例不统一
需求:鼠标移入:外圆:内圆:实现:<template> <div id="chart" style="width: 500px; height: 200px; background: rgba(2, 15, 43, 0.7)" ></div></template><script>export default { data() { return { data: [原创 2021-05-14 16:49:53 · 512 阅读 · 0 评论 -
Echarts之折线图背景区域等级划分
需求:鼠标移入:实现:<template> <div class="grade"> <div id="grade-echart"></div> <div class="legend-list"> <div class="legend-item" v-for="(item, index) in legendList" :key="index"> <span原创 2021-04-12 22:51:18 · 1162 阅读 · 1 评论 -
Echarts之柱形图--每个柱形图颜色不同且带图例
需求:鼠标移入:1、容器:<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ initChart() { // 源数据 let datas = [ { value: 1048, name: "搜索引擎" }, { value: 735, na原创 2021-03-04 12:45:22 · 3935 阅读 · 2 评论 -
Echarts之带箭头的折线图
需求:鼠标移入:1、容器:<div id="line" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ initChart() { let up = "image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAdCAMAAADb7h9dAAAABG原创 2021-03-03 14:27:01 · 3673 阅读 · 0 评论 -
Echarts之双横向柱状对比图
需求:鼠标移入:1、容器: <div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中:methods:{ initChart() { let manData = [100, 200, 300, 400, 500]; let womanData = [100, 200, 300, 400,原创 2021-03-02 15:13:22 · 4214 阅读 · 6 评论 -
echarts之含百分比的横向柱状图
需求:鼠标移入:1、容器:<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>2、在methods中methods:{ bar() { function contains(arr, dst) { var i = arr.length; while ((i -= 1)) {原创 2021-03-01 11:55:50 · 2977 阅读 · 1 评论 -
Echarts之气泡图图例
需求:鼠标移入:1、容器<div id="syscBubleChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)" ></div>2、data中的数据export default { data() { return { plantCap: [ { name: "2018", va原创 2021-02-27 22:50:40 · 5174 阅读 · 7 评论 -
Echarts之饼图图例格式化
需求:鼠标移入时:容器:<div id="pieChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>在methods中:methods:{ initChart() { let colors = ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#00FFF8"]; let name =原创 2021-02-26 17:33:21 · 1950 阅读 · 2 评论 -
echarts常用属性
文章目录1、title 标题2、legend 图例3、grid 网格4、xAxis x轴5、yAxis y轴6、tooltip 提示框7、series 图表类型8、backgroundColor 图表的背景颜色9、color 图表中各系列的颜色10、完整示例echarts的使用是通过配置项来实现的,配置项对应网址:https://echarts.apache.org/zh/option.html#title,常用的配置如下:属性释义title标题legend原创 2021-02-24 15:38:00 · 904 阅读 · 0 评论 -
Vue中使用echarts
文章目录一、安装echarts二、导入echarts三、页面中使用四、最终效果一、安装echartsnpm install echarts //默认安装最新版本npm install echarts@4.8.0 //安装指定版本二、导入echarts在 main.js 文件中引入,全局使用import Vue from 'vue'//引入import echarts from 'echarts'Vue.prototype.$echarts = echarts //将echarts放在vu原创 2021-02-24 11:23:35 · 144 阅读 · 0 评论 -
echarts网站
官网:http://echarts.apache.org/zh/index.htmlhttps://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all原创 2021-01-17 17:35:27 · 1275 阅读 · 1 评论