完整代码

<template><ve-histogram ref="chart_histogram"height="380px"style="margin-top:50px":width='chartWidth':data="chartData":settings="setting":events="chartSEvents":extend="extend" />
</template>
<script>
export default {data() {const that = thisthis.setting = {// 别称labelMap: {'name': 'x轴名字','amount': '金额(万元)',},top: 50},this.extend = {// 不显示图例legend: {show: false,bottom: '10'},tooltip: {position: [10, 320]},series: {itemStyle: {//通常情况下：normal: {//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组color: function(params) {var colorList = []; //判断点击的柱状图是否是点击当前元素   并设置相应的颜色if(params.name===that.selectName){colorList[params.dataIndex] = "#CA41CA"//点击时改变当前柱子的颜色}else{colorList[params.dataIndex] = "#cc99cc"//默认时候的颜色}return colorList[params.dataIndex];}}}},xAxis: {// 坐标轴每项的文字axisLabel: {interval: 0,formatter: (v) => {let txtArry = v.split('');let rs = "";for (var i = 0; i < txtArry.length; i++) {rs += txtArry[i] + "\n";}return rs},textStyle: {color: "#666666",//这里是改变字体颜色fontSize: 14,//字体大小}},},yAxis: {type: 'value',name: '金额（万元）',position: 'left',color: "#666666",fontSize: 14,axisLine: {show: true,lineStyle: {color: '#666666'}},axisLabel: {color: "#666666",//这里是改变字体颜色fontSize: 14,//字体大小formatter: '{value}'}}}// 点击事件this.chartSEvents = {click: function (params) {setTimeout(() => {//重新绘制柱状图that.drawRing()}, 100)//点击时候保存点击的数的名字that.selectName = params.name// console.log(params.name, '柱状图点击事件')}}return {selectName: '',chartWidth: 'auto',chartData:[{amount: 80,name: "名字1"},{amount: 100,name: "名字2"},{amount: 10,name: "名字3"},{amount: 100,name: "名字4"},{amount: 10,name: "名字5"},{amount: 690,corpName: "名字6"},{amount: 190,name: "名字7"},{amount: 230,name: "名字8"}]}},created() {const clientWidth = document.documentElement.clientWidthif (clientWidth < 990) {this.chartWidth = document.documentElement.clientWidth - 20 + 'px'} else {this.chartWidth = 'auto'}},methods: {// 绘制柱状图drawRing() {//柱状图重绘this.$refs.chart_histogram.echarts.resize()}}
}
</script>

展示效果

v-chart柱状图点击改变颜色相关推荐

button点击改变颜色_【干货】眉笔颜色要选对，三步教你选择正确眉色
是新朋友吗?记得先点蓝字关注我哦- 画好眉毛可以使得五官更具有立体感,因此选择正确的眉笔颜色非常重要.可是许多MM都不知道如何选择正确眉笔颜色,正为此烦恼,其实选择眉笔颜色很简单,只需要简单三步,就可 ...
vue实现鼠标点击改变颜色
HTML文件: <div v-for="(item,index) in collimatorlist" v-bind:key="item.id" clas ...
css鼠标点击改变颜色，点其他的颜色又变回去，去除focus黑边框
<div v-for="item in date" :key="item.id" class="div" tabindex=" ...
vue实现点击改变颜色
<template><div class="top"><div class="top_div">
android点击改变背景色的动画,Lottie-android 修改动画颜色
看到这边文章,默认你已经懂得 lottie 库的基本使用了.不懂请移步官网.https://airbnb.design/lottie/ 我遇到的问题是需要修改动画的颜色. 比如在一个按钮的点击动效中, ...
html设置表格点击变色,js实现表格变色点击行颜色改变
forword js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid b ...
Three.js 实现点击模型改变颜色
Three.js 实现点击模型改变颜色想实现点击模型,改变模型颜色的效果.在网上看了一些代码,发现特别搞笑,很多的博客给出的计算代码都是错误的,根本无法实现点击效果,还在不同的博客相互的复制,只能感 ...
Vue实现点击列表切换并改变颜色
Vue实现点击列表切换并改变颜色实现效果图如下通过Vue的父子组件传值实现效果,单击切换颜色会进性改变并添加下划线父组件代码实现(Home.vue) 需要进性对子组件的导入 import Tab ...
echarts 柱状图,单独一根柱子根据条件改变颜色
我这里是根据x轴数组的最后一个元素与series里面的color的val来做对比,如果相等就改变颜色 myChart.setOption({xAxis: {data: result.dep_data} ...

v-chart柱状图点击改变颜色

ve-histogram点击时修改颜色

完整代码

展示效果

v-chart柱状图点击改变颜色相关推荐

最新文章

热门文章