echarts
永不满足的求知者
Java-->Vue/React-->ArkTS
展开
-
ECharts接收dataset类型数据封装各类型图形组件
数据平台整合matabase图表,调用matabase已有接口使用二维数组数据格式echarts实现图表展示。原创 2023-02-04 11:21:17 · 1007 阅读 · 0 评论 -
ECharts中国地图 悬浮提示 点击铁路弹出layui弹框提示
所有数据展示都为静态数据<div class="map" id="chinaMap"></div><style><!--宽度自定义,这里为计算比例所得 有兴趣可以学习calc()-->.map{ width:calc(100% - 20%); height:100%;}</style>var init_chinaMap = function(path){ var geoCoordMap=null; var mapOptio.原创 2020-08-04 20:52:54 · 4297 阅读 · 6 评论 -
ECharts柱状图折线图备用
var getname = ['2015', '2016', '2017', '2018', '2019', '2020','2021'];var getvalue = [2301, 1935, 1535, 1303, 998,334,588]; //柱状图数据var getvalue1 = [92, 88, 93.5, 94, 96,34,78]; //折线图数据//计算最大值 function calMax(arr) { let max = 0; arr.forEach((.原创 2020-08-25 18:07:56 · 234 阅读 · 0 评论 -
ECharts环形图备用
var fontColor = "#fff";let noramlSize = 16;var datas = { value: 78, company: "%", ringColor: [{ offset: 1, color: '#FFF4DF' // 0% 处的颜色 }, { offset: 0, color: '#FFF4DF' // 100% 处的颜色 }]}var op.原创 2020-08-25 18:27:14 · 222 阅读 · 0 评论 -
ECharts柱状图 双柱
tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter(params) { let list = [] let listItem = ''; let name = ..原创 2020-09-04 15:45:06 · 4287 阅读 · 0 评论 -
ECharts横向柱状图(最大为100)
let leftArr = ['测试可以的', '玉米', '蔬菜', '鸡蛋', '坚果','测试','测试'];let rightArr = [22, 33, 44, 21,88,100,77];let emptyData = rightArr.map((v, i) => { let item = { value: 100, label: { formatter: '{a|' + v + '}', po.原创 2021-03-22 10:18:35 · 3460 阅读 · 0 评论 -
ECharts悬浮提示框设置颜色
tooltip: { trigger: "axis", axisPointer: { type: "none" }, backgroundColor: "#FFF", color: "black", borderWidth: "1", borderColor: "gray", textStyle: { color: "black" }, formatter: function(params) { .原创 2021-03-24 10:38:22 · 4077 阅读 · 0 评论 -
ECharts双层环形图备用
var datas = { value: 78, company: "%", ringColor: [ { offset: 1, color: "#FFF4DF" // 0% 处的颜色 }, { offset: 0, color: "#FFF4DF" // 100% 处的颜色 } ]};option = { grid: { left: 0, bottom: 0, top: 0,.原创 2021-08-13 09:22:48 · 758 阅读 · 1 评论 -
ECharts渐变柱状图折线图备用
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } } }, color: ['#269eff'], legend: {}, xAxis: [ { data: [1,2,3,4,5,6,7,8,9], axisTick:.原创 2021-09-26 11:32:48 · 124 阅读 · 0 评论