echarts
关注
分享
扫一扫
花归去
这个作者很懒，什么都没留下…
展开
-
echarts堆叠图
【代码】echarts堆叠图。原创 2024-09-11 13:45:35 · 214 阅读 · 0 评论 -
echarts饼图
【代码】echarts饼图。原创 2024-09-09 14:50:18 · 218 阅读 · 0 评论 -
echarts曲线图例自定义dataZoom
【代码】echarts曲线图例自定义dataZoom。原创 2024-09-05 17:08:51 · 533 阅读 · 0 评论 -
echarts象形图
【代码】echarts象形图。原创 2024-09-05 17:07:34 · 228 阅读 · 0 评论 -
echarts环形图
【代码】echarts环形图。原创 2024-09-05 17:06:26 · 344 阅读 · 0 评论 -
echarts进度
【代码】echarts进度。原创 2024-09-05 17:05:29 · 492 阅读 · 0 评论 -
echarts多个环形图
【代码】echarts多个环形图。原创 2024-09-05 17:04:05 · 387 阅读 · 0 评论 -
echarts进度
【代码】echarts进度。原创 2024-09-05 17:02:24 · 266 阅读 · 0 评论 -
仪表盘echarst
【代码】仪表盘echarst。原创 2024-09-05 17:00:22 · 307 阅读 · 0 评论 -
echarts 社区网站
1、2、3、4、5、原创 2024-05-13 16:01:36 · 699 阅读 · 0 评论 -
饼图环形图
【代码】饼图环形图。原创 2022-09-13 18:29:13 · 353 阅读 · 0 评论 -
echarts 其他展示
【代码】echarts 其他展示。原创 2022-08-24 17:22:03 · 349 阅读 · 0 评论 -
echarts 销毁实例
/ 在创建之前销毁。原创 2024-06-12 11:05:12 · 891 阅读 · 0 评论 -
echarts 柱状图点击事件
目录组件：页面引用：组件：<template> <div> <div @click="onclick" ref="echartsbar" :style="{ width: width, height: height }" ></div> </div></template><...原创 2022-04-24 16:56:36 · 8000 阅读 · 0 评论 -
echarts饼图
let datas = [ { name: '提高卫生标注', value: 100 }, { name: '加强安全教育', value: 40 }, { name: '规范仪容仪表', value: 50 }, { name: '提升言谈举止', value: 30 }, { name: '增强服务意识', value: 30 }];const mockData = ...原创 2022-04-11 16:14:51 · 615 阅读 · 0 评论 -
echarts环形图多个title
let datas = [ { name: "提高卫生标注", value: 100, }, { name: "加强安全教育", value: 40, }, { name: "规范仪容仪表", value: 50, }, { name: "提升言谈举.....原创 2022-01-27 15:37:41 · 2753 阅读 · 0 评论 -
双y轴曲线
option = { backgroundColor: '#0c1e55', //背景颜色 title: { text: '大声道', //表头 x: 'center', top: "20", textStyle: { //文字颜色 color: '#ffff', //字体风格 fontStyle: 'normal', ...原创 2022-01-25 10:04:57 · 149 阅读 · 0 评论 -
嵌套组合图echarts
/// 整体混合图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xrySKpOnjM /// 嵌套图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xAi9VBmJLg var overviewChartID = 'overview-chart'; var overviewTitle = ''; //标题 var overviewSubTitle ...原创 2022-01-25 10:03:17 · 537 阅读 · 0 评论 -
饼图echarts自定义样式
option = { title : { text: '大唐热源占比', //subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, color: ['#1891FF', '#12C3C3', '#FBCD14', '#F...原创 2022-01-25 10:02:11 · 1017 阅读 · 0 评论 -
多曲线charts
option = { title: { text: '' }, tooltip: { trigger: 'axis', formatter: function(params) { //数据单位格式化 var relVal = params[0].name; //x轴名称 relVal += "<div style='width:140p......原创 2022-01-25 10:01:14 · 135 阅读 · 0 评论 -
雷达图echarts
var height = document.querySelector('#chart-panel').offsetHeight;var width = document.querySelector('#chart-panel').offsetWidth;var radiusMax = width >= height ? height : widht;console.log(width);var data = { title: '雷达图', ratioData: [{...原创 2022-01-25 09:59:15 · 991 阅读 · 0 评论 -
雷达图echarts
var height = document.querySelector('#chart-panel').offsetHeight;var width = document.querySelector('#chart-panel').offsetWidth;var radiusMax = width >= height ? height : widht;console.log(width);var data = { title: '雷达图', ratioData: [{...原创 2022-01-25 10:03:31 · 183 阅读 · 0 评论 -
echarts 环形图鼠标悬停
var m2R2Data = [{ value: 335, value1: 234, legendname: 'Ⅰ类', name: "Ⅰ类", itemStyle: { color: "#8d7fec" } }, { value: 310, value1: 314, legendname: 'Ⅱ类', ...原创 2022-01-24 10:03:21 · 1038 阅读 · 0 评论 -
echarts雷达图
option = { color: ['#a7324a','#ffd400','#45b97c'], title: { text: '热源出力', subtext: '345', left: 'center', top: '46.3%', textStyle: { color: '#fcaf17', fontWeight: 'normal', fontSize: 18 }, subtextStyle: { c...原创 2022-01-24 10:02:21 · 937 阅读 · 0 评论 -
echarts仪表盘
var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [{ min: 0, max: 100, axisLine: { width: 20, show: true, lineStyle: { ...原创 2022-01-24 10:01:09 · 430 阅读 · 0 评论 -
echarts 饼图
option = { backgroundColor: '#0c1e55',color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f','#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee', '#50b332'], tooltip: { trigger: 'item', // formatter: " {a} <br/>{b} :...原创 2022-01-24 10:00:07 · 118 阅读 · 0 评论 -
圆头柱状图
option = { backgroundColor: '#0c1e55', //背景颜色 title: { text: '测温', x: 'center', top: "20", textStyle: { //文字颜色 color: '#ffff', //字体风格 fontStyle: 'normal', ...原创 2022-01-24 09:58:56 · 333 阅读 · 0 评论 -
嵌套柱状图
找不到参考的地址了option = { title: { text: '嵌套柱图', left:'left', }, tooltip: { show:true, trigger:'axis', showDelay:0, form...原创 2022-01-24 09:57:21 · 315 阅读 · 0 评论 -
饼图echarts
option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f','#23cbe5', '#ec561b', '#00ae9d', '#dddf00', '#b23aee', '#50b332'], lege...原创 2022-01-24 09:52:44 · 448 阅读 · 0 评论 -
柱状图验收横向渐变
option = { title: { text: '同期流量热量', textStyle: { align: 'center', color: '#fff', fontSize: 20, }, top: '3%', left: '10%', }, backgroundColor: '#0f375f',...原创 2022-01-24 09:51:33 · 106 阅读 · 0 评论 -
双Y轴柱状、曲线图
dataXName=["淑阳镇","","","",""]option={ tooltip: { trigger: "axis", // "axisPointer": { // "type": "cross", // "crossStyle": { // "color": "#999" // } // } }, ...原创 2022-01-24 09:50:00 · 191 阅读 · 0 评论 -
柱状图双y轴
option = { "color": ["#441EEC", "#0A88FD", "#24DB72", "#CE720F"], "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" }, formatter: function(params) { //数据单位格式化 var ...原创 2022-01-24 09:48:39 · 341 阅读 · 0 评论 -
全网均温饼图
//转载的，下面是源码地址//https://gallery.echartsjs.com/editor.html?c=x0B_eilI8soption = { backgroundColor: '#142468', title:[{ text: '全网调控情况', textStyle: { fontSize: 16, color: "#96e5f8" ...转载 2022-01-21 17:40:14 · 101 阅读 · 0 评论 -
动态图饼图
let value = 65.23;let title = 'vision';let int = value.toFixed(2).split('.')[0];let float = value.toFixed(2).split('.')[1];option = { backgroundColor: '#020f18', title: { text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '...转载 2022-01-21 17:36:11 · 175 阅读 · 0 评论 -
环形图左右半个echarts
var dataStyle = { normal: { // label: { // show: false // }, label: { show: true, position: 'inside', color: '#ffff', fo...原创 2022-01-21 17:34:02 · 494 阅读 · 0 评论 -
纵向渐变柱状图
datatime=["04-01", "04-02", "04-04"]datadata= [1200, 1500, 2000]option={ tooltip: { "trigger": "axis", // "axisPointer": { // "type": "cross", // "crossStyle": { // "color": "#999" //...原创 2022-01-21 17:28:30 · 324 阅读 · 0 评论 -
两个柱状图
option = { title: { // text: '热源实时流量', textStyle: { align: 'center', color: '#fff', fontSize: 20, }, top: '3%', left: '10%', }, backgroundColor: '#0f375f'...原创 2022-01-21 17:27:29 · 563 阅读 · 0 评论 -
曲线组合图 类型详情
/// 整体混合图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xrySKpOnjM /// 嵌套图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xAi9VBmJLg var overviewChartID = 'overview-chart'; var overviewTitle = '预测数据'; //标题 var overview...原创 2022-01-21 17:26:31 · 195 阅读 · 0 评论 -
曲线step类型
option = { title: { text: '温度' }, tooltip: { trigger: 'axis' }, legend: { data: ['供温', '回温', '均温'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: tr...原创 2022-01-21 17:15:50 · 400 阅读 · 0 评论 -
多曲线组合图
/// 整体混合图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xrySKpOnjM /// 嵌套图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xAi9VBmJLg var overviewChartID = 'overview-chart'; var overviewTitle = '能源数据总览'; //标题 var overvi...原创 2022-01-21 17:13:25 · 128 阅读 · 0 评论