RWHE 2021-04-15 16:58 采纳率: 0%
浏览 78

echars设置柱状图单个柱子的颜色

lineColor设置所有柱状图柱子的颜色

 通过这个 this.barChartOption.ser[0].lineColor获取到所有添加进去的柱子颜色,

怎样获取单个数据的lineColor并设置颜色?

所有的数据push进去的

求大神解答???

 

<template>

  <bar-chart ref="barChart"></bar-chart>

</template>

<script>

import { forEachToJson } from "tool/tool.js";

import barChart from "local/charts/bar/index.vue";

import allData from "../configure/allData.js";

import projectOption from "controller/projectOption.js";

 

export default {

  data(){

    return{

      projectOption: projectOption,

      barChartOption: {

        axis: [],

        id: "barChart",

        barWidth: 20,

        unils:"百万",

        ser: [

           { data: [], name: "县", tianc: true , lineColor: "orange"}

        ]

      },

    }

  },

  computed: {

    // pageData() {

    //   return this.$store.state.onlineRetailersIndex.pageData.leftTop;

    // }

  },

  components: {

    barChart,

  },

  mounted() {

  },

  methods:{

    makePage() {

      this.barChartOption.axis =[];

      this.barChartOption.ser[0].data = [];

      

      this.barChartOption.make = {yName: ""};

      if(allData){

        this.barChartOption.make = {

          grid: {

            top: "15%",

            left: "2%",

            right: "2%",

            bottom: "5%"

          },

          xRotate: -50,

          yName:"单位:百万",

          interval:true,

          

        };

        var dataList=[];

 

        forEachToJson(allData, (key,v) => {

          v.forEach((v,i) => {

            dataList.push({ name: v.name, value: (v.value*100).toFixed(0) });

            });

          });

        dataList.eltSort("value").reverse().forEach((v,i)=>{

           this.barChartOption.axis.push(v.name);

           this.barChartOption.ser[0].data.push(v.value);

          // console.log(this.barChartOption.ser[0]);

          //  if(v.name==projectOption.projectName){

          //   this.barChartOption.ser[0].lineColor="red";

          // }

        });

        

       

      }

      this.$refs.barChart.makeChart(this.barChartOption);

    }

  }

}

</script>


 

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-04-15 17:37
    关注

    https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color 官网有个例子你参考一下 我试了一下 4版本5版本都可以

    评论

报告相同问题?

悬赏问题

  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上,请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。
  • ¥15 各位 帮我看看如何写代码,打出来的图形要和如下图呈现的一样,急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题,请各位专家解答!
  • ¥30 vue+element根据数据循环生成多个table,如何实现最后一列 平均分合并
  • ¥20 pcf8563时钟芯片不启振