echarts
汉武大帝·
我是攻城狮
展开
-
echarts中饼图同时显示中间文字和 标注线内容
echarts中饼图同时显示中间文字和 标注线内容原创 2022-08-17 14:36:21 · 3726 阅读 · 0 评论 -
echarts 双柱状图,X轴带滚动条的柱状图
echarts 双柱状图:https://www.makeapie.com/editor.html?c=xTJyYkJflTecharts X轴带滚动条的柱状图:https://www.makeapie.com/editor.html?c=xG3rZAFEqu原创 2021-03-10 11:09:22 · 1383 阅读 · 1 评论 -
echarts饼图中鼠标移入后改变背景色的设置
series:[{ itemStyle: { normal: { color: '#EAF0F0',//移入前的颜色 }, emphasis:{ color:"#EAF0F0",//移入后的颜色 } },}]原创 2020-12-21 09:36:54 · 5177 阅读 · 0 评论 -
echarts柱状图的label设置,动态设置position
先看效果:图一:图二:数值大于零的在x轴上方,label在柱状图上方,小于零的在x轴下方,label在轴下方;相关代码如下: <template> <div> <ChartTitle :name="config.titleName1" /> <div id="areaRate"></div> <ChartTitle :name="config.titleName2" /> ..原创 2020-12-18 14:23:28 · 26480 阅读 · 7 评论 -
echarts中折线图添加手柄,x轴数据隔一个显示一个
先看效果:主要是设置的:axisLabel: { interval: 1, // x轴数据显示设置;0:则显示所有的;1:隔一个显示一个 textStyle: { color: "#A8B6CD", }, // 默认x轴字体大小 fontSize: 12, // margin:文字到x轴的距离 margin: 15, },全部代码如下:<template> <!-原创 2020-09-09 17:19:34 · 2631 阅读 · 2 评论 -
echarts中dataZoom ,设置 handleIcon 为圆形或长方形
dataZoom组件 用于区域缩放,先上手柄效果图:长方形和圆形的效果:先将 handleIcon 的具体数值贴出来: dataZoom: [ { id: "dataZoomX", type: "slider", backgroundColor: "#F2F5F9", fillerColor: "#BFCCE3", showDataShadow:.原创 2020-09-07 16:54:29 · 4097 阅读 · 0 评论 -
echarts 一个图表中同时显示柱状图和折线图
先看效果图<template> <!-- 工贸库存组件 --> <div id="main"></div></template><script>export default { data() { return { myChart: null, option: null...原创 2020-04-02 15:56:14 · 4305 阅读 · 5 评论 -
窗口变化,echarts自动变化的设置
方法一:var myChart = echarts.init(document.getElementById(domid));window.addEventListener('resize',function () { //执行 myChart.resize();})方法二:window.onresize = function () {//不执行 myCha...原创 2020-01-13 10:07:19 · 831 阅读 · 0 评论 -
echarts柱状图修改背景线为网格线、去掉刻度标签、鼠标悬停在柱条上时变色、柱条圆角弧度
option = { color: [‘red‘],//修改柱条颜色tooltip : { triggerOn:‘mousemove‘ },grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true },xAxis : [ { type : ‘category‘, data : [‘Mon‘, ‘Tue‘, ‘We...原创 2020-01-12 15:13:19 · 7927 阅读 · 0 评论 -
使用echarts画树图,并设置节点为不同的图片
先看一下效果图:这是树图的单方向发散;在html页面中的代码如下:(这里的echarts.js文件是在本地通过script标签引入的,在vue项目中的话,想要画树图的话,一定要使用script标签引入echarts.js文件,要不然刷新页面时,树图节点不显示)<!DOCTYPE html><html lang="en"><head> ...原创 2019-12-18 10:54:11 · 90935 阅读 · 5 评论 -
使用echarts画横向柱状图
在html页面中使用echarts的话,需要使用script先引入 echarts.min.js 或者 echarts.js文件;<script src="echarts.min.js"></script>html页面中的示例代码如下:<!DOCTYPE html><html><head> <meta c...原创 2019-12-12 09:45:46 · 1512 阅读 · 2 评论 -
使用echarts做关系图
先看效果图:结构: <div ref="table12" id="table12" style="width: 100%;height:7.5rem;"></div>script中的方法: init_table13(){ // 连线数据 var links = [{id: "0", name: null, sou...原创 2019-11-18 18:02:32 · 1490 阅读 · 0 评论 -
echarts关系图节点设置头像,并使头像以圆形来显示!
<!DOCTYPE html><html style="height: 100%"><head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <style ...原创 2019-11-09 10:08:55 · 1923 阅读 · 0 评论 -
echarts中如何去掉柱状图的横线和竖线
xAxis、yAxis 选项中分别加入这句话:splitLine:{ show:false}原创 2019-08-24 14:57:27 · 19905 阅读 · 0 评论