ECharts
一只爱好编程的程序猿
莫问收获,但问耕耘
展开
-
Echarts中y轴name文字显示问题
Echarts中y轴name文字显示问题原创 2022-03-31 09:20:23 · 7591 阅读 · 4 评论 -
如何使用Echarts来绘制3d效果的柱状图
如何使用Echarts来绘制3d效果的柱状图原创 2022-03-28 09:12:57 · 5806 阅读 · 4 评论 -
Echarts之散点图
根据Echarts画出散点图option = { dataset: { dimensions:['dept','age'],//设置x轴和y轴的数据 source:[ {dept:'法务部',age:'0-10',num:'10'}, {dept:'财务部',age:'10-20',num:'20'}, {dept:'商务部',age:'20-30',num:'30'}, {dept:'计划部',age:'30-40',num:'10'}原创 2022-03-16 10:52:42 · 8022 阅读 · 1 评论 -
ECharts中的事件和行为
在ECharts 3中绑定事件跟2一样都是通过on方法,但是事件名称比2更加简单了。ECharts3中,事件名称对于DOM事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。myChart.on('click', function (params) { // 控制台打印数据的名称 console.log(params.name);});在ECharts中事件分为两种类型,一种是用户鼠标操作点击,或者hover图表的图形时触发的事件,还是一种用户在使用可以交互的组件后触发的行原创 2020-08-14 10:18:39 · 1714 阅读 · 0 评论 -
移动端自适应
ECharts组件的定位和布局大部分[组件]和[系列]会遵循两种定位方式:left/right/top/bottom/width/height定位方式:这六个量中,每个量都可以是[绝对值]或者[百分比]或者[位置描述]。绝对值单位是浏览器像素(px),用number形容书写(不写单位)。例如{left:23,height:400}。百分比表示占DOM容器高度的百分之多少,用string形式书写。例如{right:'30%',bottom:'40%'}。位置描述可以设置le.原创 2020-08-12 10:21:19 · 99 阅读 · 0 评论 -
使用dataset管理数据
ECharts4以前,数据只能声明在各个系列(series)中,例如:option = { xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] }, yAxis: {}, series: [ { type: 'bar', name: '2原创 2020-08-04 13:39:32 · 308 阅读 · 0 评论 -
个性化图表的样式
首先我们绘制一个个性化的南丁格尔图<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>myProject</title> <!-- 引入 lib/echarts.custom.min.js --> <script src="./lib/echarts.min.js"></script></he原创 2020-07-30 13:46:59 · 240 阅读 · 0 评论 -
ECharts基础概念介绍
echarts实例一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等等(用option来描述)。准备一个DOM节点(作为echarts的渲染容器),就可以在上面创建一个echarts实例。每个echarts实例独占一个DOM节点。系列(series)系列(series)是很常见的名词。在echarts里,系列是指:一组数值以及他们映射成的图。在echarts中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个系列包含的要素至少要有:一.原创 2020-07-30 11:41:36 · 1414 阅读 · 0 评论 -
构建ECharts
我们来构建一张饼状图<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>myProject</title> <!-- 引入 lib/echarts.custom.min.js --> <script src="lib/echarts.custom.min.js"></script></he原创 2020-07-30 10:19:43 · 362 阅读 · 0 评论 -
初识ECharts
第一步:引入ECharts通过标签方式直接引入构建好的echarts文件<html> <head> <meta charset="utf-8"> <!--引入ECharts文件--> <script src = "echarts.min.js"></script> </head></html>第二步:绘制一个简单的图表在绘图前我们需要为ECharts准备一个具备高度的DOM容器。.原创 2020-07-30 09:28:08 · 149 阅读 · 0 评论