-
echarts vue 柱状图实例_用vue引入echarts柱状图之后, 布局全乱了?
2021-01-26 22:29:16之前在js直接引用echarts可以正常使用, 下面的图是我之前做的但是用了vue之后, 布局全乱了, 调也调不了htmljsexport default {mounted() {/* 统计柱状图 */var myChart = echarts.init(document.getElementById(...之前在js直接引用echarts可以正常使用, 下面的图是我之前做的
但是用了vue之后, 布局全乱了, 调也调不了
html
js
export default {
mounted() {
/* 统计柱状图 */
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var statistics = {
title: {
text: "面积",
textStyle: {
fontWeight: "normal",
color: "#fff", // 标题颜色
fontSize: 14
},
left: "center"
},
tooltip: {
// 鼠标移动柱状图是提示文字
show: true
},
legend: {
// data: ['面积'],
textStyle: {
fontSize: 12
}
},
// 横坐标
xAxis: {
data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
axisLine: {
lineStyle: {
color: "#094060"
}
}
},
// 纵坐标
yAxis: {
// 设置坐标轴字体颜色
axisLine: {
lineStyle: {
color: "#094060"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
color: ["#07405c"]
}
}
},
//配置样式
itemStyle: {
color: '#06ae7c',
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
series: [
{
type: "bar",
barWidth: 50, // 设置柱的宽度
data: [38, 23, 35, 12, 26, 8, 36]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(statistics);
}
}
-
前端vue显示柱状图_Vue—Echarts 柱状图
2020-12-19 17:38:55使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例。ee05abaf9633184a9c012631b642d970.png使用npm安装Echartsnpm install echarts --save在man.js中...使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例。
ee05abaf9633184a9c012631b642d970.png
使用npm安装Echarts
npm install echarts --save
在man.js中引入对应的echarts
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
/* 引入echarts工具 */
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
在vue文件下的编写
data() {
return {
optionTrend: {
color: ['#2860fc'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'|'none'
}
},
title: {
text: '金额数量',
top: '15',
left: '-3',
textStyle:{
fontSize: 14, //字体大小
color: '#666666', //字体颜色
fontWeight: '500'
},
},
grid: {
left: '-27',
right: '4',
bottom: '0%',
containLabel: true
},
xAxis: [ {
type: 'category',
data: ['0-5K', '5K-3W', '3W-5W', '5W-10W', '10W以上',],
axisLine: { // 改变x轴颜色
lineStyle: {
color: '#c1c1c1',
width: '1',
}
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "#666666",
fontSize: 12,
},
},
} ],
yAxis: [ {
type: 'value',
axisTick: 'none', // 右边轴样式的显示
axisLine: 'none', // 右边轴样式的显示
// 修改网格的颜色
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#f5f5f5'
}
},
} ],
series: [ {
name: '',
type: 'bar',
barWidth: '50%',
data: [10, 52, 200, 334, 390,]
} ]
},
}
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
methods:{
resizeTheChart() {
if (this.$refs.TrendChart) {
this.$refs.TrendChart.resize();
}
},
27c1eac97e42e440849ac938a0bc4574.png
应为上面已经贴过template、beforeDestroy、mounted和methods里面的代码了这里只贴对应options里面的代码
dataRecordOptions: {
grid: {
left: '40',
right: '20',
bottom: '30',
top: '30',
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none', // 中间横线
},
},
xAxis: {
data: ['数字身份','存证','数据报送','电子合同',],
axisLine: 'none',
axisLabel: {
color: '#fff',
fontSize: 12,
fontWeight: 500,
}
},
yAxis: {
type : 'value',
axisLabel: {
textStyle: {
fontSize: 12, //字体大小
color: '#137cf2', //字体颜色
},
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000 && value < 100000000) {
value = value / 10000000 + "千万";
} else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
splitLine: {
show:true,
lineStyle: {
color: '#737f8d',
type: 'dashed', // 背景为虚线
}
},
axisTick: 'none', // 右边轴样式的显示
axisLine: 'none', // 右边轴样式的显示
},
series: [{
type: 'bar',
barWidth: 30,
smooth:false,
itemStyle:{
normal: {
color: function(params) {
var colorList = ['#137cf2','#f89009','#f8d909','#01cc78',];
var colorListr = ['#137cf2','#f8d909','#f89009','#5e00a6',];
return colorListr[params.dataIndex]
},
},
},
label: {
normal: {
show: true,
fontSize: 12,
fontWeight: '500',
color: '#ffffff',
position: 'top',
}
},
data: [10000,12000,8000,14000],
}],
}
-
div横向拖动 vue_echarts柱状图实现多种颜色渐变(基于vue)
2021-01-06 16:21:57一. 下载echartsnpm install ...在main.js里引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts三.在vue组件中的使用<template> <div> <div>乡镇环保指数概况div> &l...一. 下载echarts
npm install echarts --save
二.在main.js里引入echarts
import echarts from 'echarts'Vue.prototype.$echarts = echarts
三.在vue组件中的使用
<template> <div> <div>乡镇环保指数概况div> <div id="myChart" :style="{width: '400px', height: '400px'}">div> div>template><script type="text/ecmascript-6">export default { methods:{ drawLine(){ // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) let that = this // 绘制图表 myChart.setOption({ color: ['#3B93F7', '#7BD7B5'], legend: {data: ['平邑开发区', '平邑检测站']}, xAxis: [{ data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3'] }], yAxis: [{ min:0, max:100 }], series: [{ name: '平邑开发区', type: 'bar', barGap: 0, data: [20, 32, 1, 34, 60], itemStyle: { normal: { color: function(params) { let colorList = [ // 存放柱状图渐变色的数组可以是多个 ['#1f6cf6', '#409af7'], ]; let index = params.dataIndex % colorList.length; // 如果是纵向渐变色的图标,则改为0, 0 , 0, 1 //如果是横向的渐变色图标,则改为1, 0 , 0, 0 return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorList[index][0] }, { offset: 1, color: colorList[index][1] } ]); }, barBorderRadius: 2 //柱状角成椭圆形 } } }, { name: '平邑检测站', type: 'bar', data: [20, 82, 91, 44, 90], itemStyle: { normal: { color: function(params) { var colorList = [ ['#50b398', '#89e3be'], ]; var index = params.dataIndex % colorList.length; // 如果是纵向的图标,则改为0, 0 , 0, 1 return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorList[index][0] }, { offset: 1, color: colorList[index][1] } ]); }, barBorderRadius: 2 //柱状角成椭圆形 } } }, ] }); } }, mounted(){ this.drawLine(); } }script><style scoped>style>
四.实现的效果展示
-
vue echarts柱状图封装
2020-05-23 16:45:06echarts 柱状图vue封装 <template> <div class="bar" id="bar" /> </template> <script> // 自行引入echarts import echarts from 'echarts' export default { name: 'Bar', // 接收从...效果
echarts 柱状图vue封装
<template> <div class="bar" id="bar" /> </template> <script> // 自行引入echarts import echarts from 'echarts' export default { name: 'Bar', // 接收从父组件传回的值 props: ['getData'], data () { return {} }, // 实时监听父组件传过来的值,进而执行drawBar方法,重绘柱状图 watch: { getData: { handler (value) { this.drawBar(value) }, deep: true } }, mounted () { this.drawBar() }, methods: { drawBar ({ textTitle = '', nameTitle = '', xName = '', yName = '', nameArray = [], dataArray = [], colorArray = [], barWidth = '30%', showTopVal = false, xAxis = [ { name: yName, type: 'category', data: nameArray, nameLocation: 'end', axisTick: { show: false }, splitLine: { show: false // 去除网格线 }, axisLabel: { interval: 1, formatter: function (value) { let str = '' let num = 7 // 每行显示字数 let valLength = value.length // 该项x轴字数 let rowNum = Math.ceil(valLength / num) // 行数 if (rowNum > 1) { for (let i = 0; i < rowNum; i++) { let temp = '' let start = i * num let end = start + num temp = value.substring(start, end) + '\n' str += temp } return str } else { return value } } }, nameTextStyle: { padding: [30, 0, 0, -30] } } ], dataZoom = [], grid = { left: 20, right: 20, bottom: 20, top: 80, containLabel: true } } = {}) { let barBox = echarts.init(document.getElementById('bar')) let option = { title: { text: textTitle, left: 'center', top: 10, textStyle: { color: '#333', fontSize: '18', fontWeight: 'bolder' } }, grid: grid, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, dataZoom: dataZoom, xAxis: xAxis, yAxis: [ { axisLine: { show: false }, name: xName, type: 'value' // axisLabel: { // formatter: value => (value + '元') // } } ], series: [ { name: nameTitle, type: 'bar', barWidth: barWidth, data: dataArray, label: { show: showTopVal, // 开启显示 position: 'top', // 在上方显示 textStyle: { // 数值样式 color: '#333333', fontSize: 12 } }, itemStyle: { normal: { color: function (params) { const colorList = colorArray return colorArray.length > 0 ? colorList[params.dataIndex] : '#EA8187' } } } } ] } barBox.setOption(option, true) } } } </script>
使用
<template> <div> <--宽度,高度--> <bar :get-data="objectData" id="barId" style="height: 250px"></bar > </div> </template> <script> import Bar from '@/components/bar' export default { components: { Bar }, data () { return { objectData: { textTitle: '', nameTitle: '', nameArray: [], dataArray: [], colorArray: [] } } } </script>
-
在vue中实现 echarts柱状图 Y轴渐变色
2019-04-25 17:29:31在vue中实现echarts柱状图Y轴渐变色在vue中实现echarts柱状图渐变色一:安装二: 创建图表全局引入最终结果 在vue中实现echarts柱状图渐变色 一:安装 1. 首先需要安装echarts依赖包 npm install echarts -S 2. 或者... -
vue 引入echarts并切换柱状折线图,改变折线的颜色
2020-11-27 14:38:22Vue.prototype.$echarts = echarts 3.创建一个vue页面 <template> <DIV> <el-card id="main" style="width:32.5%;height:1.7rem;"></el-card> </DIV> </template& -
vue 中使用 echarts 柱状图
2020-05-07 22:06:03这里写目录标题tooltipMixin.jstest.vue三级目录 tooltipMixin.js require('echarts/lib/chart/bar') // 引入提示框和标题组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') ... -
echarts vue 柱状图实例_vue + eCharts 实例
2020-12-30 08:50:01main.js需引入echarts,main.js 代码:// 引入echartsimport echarts from 'echarts'// 引入后将echarts存为全局变量 $echarts 之后用的时候就使用 this.$echartsVue.prototype.$echarts = echartsecharts.vue代码:... -
vue使用echarts绘制柱状图与扇形图
2020-10-20 15:46:31在main.js中引入echarts import echarts from ‘echarts’ Vue.prototype.$echarts = echarts 创建板块 <div class="echartsLeft1 echart"> <div class="HelloWorld echart-box" id="myChart1" >&... -
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
2021-02-01 02:39:06在main.js中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在相应的vue中导入echartsimport echarts from 'echarts';实现柱状图显示mounted: function () {// 基于准备好的dom,初始化... -
vue项目中使用ECharts柱状图并利用双Y轴给柱状图添加右边框
2019-05-09 09:49:58本篇讲述在vue项目中使用ECharts柱状图,并利用双Y轴给图表添加右边框 应项目要求,UI给的设计图给图表右边添加了右边框,而echarts中大多是无右边框,或是全部加上纵轴线,显示为网格样式,因此在这想到用双Y轴实现... -
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
2020-12-19 17:38:54Vue接入Echarts 显示柱状图饼图使用CLI接入npm install echarts --save1.可以全局引入(在main.js)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.或者局部引入(在script)import ... -
vue+echarts 绘制折线图、柱状图和扇形图
2020-08-29 16:18:10前端时间在前端岗位上要实现Vue项目中的echarts画图,今天来分享下vue+echarts折线图、柱状图和扇形图的方法。每种图的echarts配置差不多一致,但根据图种需进行指定选项的改动。 一、折线图 折线图中,series要包含... -
vue-echarts--混色柱状图
2018-08-04 14:10:21本文简单介绍如何使用vue-echarts画出多种颜色的柱状图: 搭建vue-cli 脚手架 安装vue-echarts依赖 引入vue-echarts 绘制图表 搭建vue-cli 脚手架 1.安装 vue(推荐使用淘宝镜像cnpm替换npm进行安装) ... -
关于vue引入ECharts组件的问题
2019-02-26 21:07:31什么是ECharts? Echarts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库...有折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图... -
vue+element+echarts柱状图+列表
2019-06-12 11:56:00前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面;...柱状图和列表: <script type="text/javascript" src="/main/common/echarts/echarts.min.js"></script&... -
柱状图多维条形图vue_vue中引入echarts,柱形图没有显示数据
2020-12-28 19:23:55父组件import echarts from 'echarts'import BarGraph from '../../components/bargraph.vue'export default {name: '',data () {return {opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],... -
柱状图多维条形图vue_VUE中使用Echarts绘制柱状图
2020-12-18 19:25:12在main.js中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在相应的vue中导入echartsimport echarts from 'echarts';实现柱状图显示mounted: function () {// 基于准备好的dom,初始化... -
Vue集成Echarts 实测可以显示(柱状图和旭日图)
2020-07-09 23:03:55安装和引入echarts # 安装echarts npm install echarts --save 引入Echarts #使用echarts的组件 Vue.use(echarts); #可以通过$echarts记性操作 Vue.prototype.$echarts = echarts 组件中引入echarts im -
vue使用echarts插件画柱状图,并实现两个柱状图的切换
2019-08-28 16:21:24需求:页面中有两个条形图,通过局部导航切换查看 思路: 1、先实现条形图基本的样式效果 2、创建两个子路由,将两个条形图分别放进子路由中 ...安装以及在main.js引入 npm install echarts -S import ... -
vue饼图组件_Vue接入Echarts 显示柱状图饼图
2021-02-05 00:24:29Vue接入Echarts 显示柱状图饼图使用CLI接入npm install echarts --save1.可以全局引入(在main.js)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.或者局部引入(在script)import ... -
vue中引入echarts并实现echarts自适应
2018-07-10 10:54:56vue中引入echarts并实现echarts自适应 在许多项目中需要使用到柱状图、饼状图等,在本篇博客中介绍echarts的自适应。 实现echarts的自适应可以使用window.onresize(),具体操作如下: npm安装echats: npm ... -
ECharts柱状图属性配置
2020-05-29 19:11:19Vue.prototype.$echarts = echarts 这些属性是在官网看配置项外加看视频,然后一点一点去整理的。 可能不多,不过基本够用了。 let myChart1 = this.$echarts.init(document.getElementById("box")); myChart1.... -
echarts 按需引入模_Vue中引入Echarts封装组件的两种方式
2020-11-29 22:43:221. 安装echarts因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组件的Echarts包,所以这里两个都需要安装:npm install echarts vue-echarts -S当然... -
VUE项目整合echarts图表柱状图
2019-08-07 11:02:591、首先在vue项目上安装echarts依赖 在项目根目录的命令窗口输入 npm install echarts -S 2、全局引入(main.js) import charts from 'echarts' Vue.prototype.$echarts = echarts 3、然后就是在需要显示...
-
聊聊MyBatis缓存机制
-
C和C++课程
-
9.整型安全操作.rs
-
免费简单粗暴帝国CMS7.5UTF8会员中心用户后台HTML5自适应响应式模板精心优化版
-
app软件测试全栈系列精品课程
-
MySQL 数据库的基本操作(数据完整性约束)
-
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
Squid 代理服务器-详细配置配写(三种代理,日志、ACL访问控制)
-
使用vue搭建微信H5公众号项目
-
conda activate报错AttributeError: module ‘enum‘ has no attribute ‘IntFlag‘
-
SpringCloud 第八章:SpringCloud Config
-
2021-03-04
-
精通编译Makefile,Nina, 从底层uboot到Android
-
PowerBI重要外部工具详解
-
Unity RUST 逆向安全开发
-
盛世昊通签约万旗投资,打造汽车行业美好明天!
-
Java23种设计模式(总结).doc
-
Twice_Bot-源码
-
VMware vSphere ESXi 7 精讲/VCSA/VSAN
-
26灰雀 教案.docx