Vue 中echarts的数据参数使用

清疚 2022-11-18 13:50 398阅读 0赞

[https://www.cnblogs.com/tugenhua0707/p/9380378.html][https_www.cnblogs.com_tugenhua0707_p_9380378.html]

[https://blog.csdn.net/qq\_28691187/article/details/112462859][https_blog.csdn.net_qq_28691187_article_details_112462859]

[https://blog.csdn.net/u012612399/article/details/53838326][https_blog.csdn.net_u012612399_article_details_53838326] eCharts——柱状图中的柱体颜色渐变

[https://blog.csdn.net/qq\_36538012/article/details/115413879][https_blog.csdn.net_qq_36538012_article_details_115413879]  Echarts设置背景的网格线为虚线

[https://blog.csdn.net/MistyWood/article/details/103632039][https_blog.csdn.net_MistyWood_article_details_103632039]  echarts bar series下的label position的属性值

### [https://zhuanlan.zhihu.com/p/58888287][https_zhuanlan.zhihu.com_p_58888287] Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总 ###

echarts 初始化两种写法
    
    1.推荐
    const chart = this.$refs.chart
          if (chart) {
            //var myChart = this.$echarts.init(chart); //这种写法打包报错init 
            var myChart = echarts.init(chart); //推荐
            const option = {...}
            myChart.setOption(option)
    }
    
    
    2.
    this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
    var option = {...}
    this.chartLine.setOption(option)

![20210413162436321.png][]

## 柱形图：圆角 渐变 ##

itemStyle: {
                    normal: {
                      barBorderRadius: [20, 20, 0, 0], //柱形图圆角，初始化效果
                      color: new echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [
                          {
                            offset: 0,
                            color: "#8cd7f5", // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: "#4dc0f1", // 60% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#14aeed", // 100% 处的颜色
                          },
                        ],
                        false
                      ),
                    },
                  },

## barBorderRadius:\[10, 10, 10, 10\] 表示右上，右下，左下，左上的边框弯曲像素值 ##

## label position的属性值： ##

1.
    inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)
    
    2.
    坐标[x,y](以柱状的顶部为原点)
    
    3.
    insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)

![20210413162018245.png][]

在 Echarts 文档中查找设置图标位置，设置条形图的位置，设置饼状图的位置，找到很艰辛。

1.  设置条形图的位置通过 `option.grid` 的 `x` 属性设置图形 x 轴方向距左上角的位置 ，`x`、`y`、`x2`、`y2` 的的含义如下图：
2.  ![4e99ee9c7687b5fb1cfc92a173494f07.png][]
3.  设置饼状图的位置通过 `series.center` 属性，默认是 `[50%, 50%]`.

getRobotEchartData() {
          const chart = this.$refs.chart1;
          if (chart) {
            var myChart = this.$echarts.init(chart);
            let xdata = [
              "2020-06",
              "2020-07",
              "2020-08",
              "2020-09",
              "2020-10",
              "2020-11",
            ];
            let ydata = [44, 1800, 100, 999, 222, 333];
            const option = {
              trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。只有设置了这个参数才会出现竖直的线条
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "bar", //指示器类型。
              },
              title: {
                text: "机器人任务总量（单位:个）", //图表名字
                textStyle: {
                  fontSize: 14, //图表名字字体大小
                },
              },
              grid: {//设置图表位置
                x: 80,
                y: 60,
                x2: 80,
                y2: 60, //增加柱形图纵向的高度
                // width: {totalWidth} - x - x2,
                // height: {totalHeight} - y - y2,
                containLabel: true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 1,
                borderColor: '#ccc'
              },
              legend: {
                data: [ '邮件营销', '联盟广告', '视频广告']
              },
              barWidth: 20, //总设置柱状图的柱形宽度
              color: ["#9fbff0"], //柱形背景
              // ---  悬浮提示框 ----
              tooltip: {
                show: true, // 是否显示提示框，默认为true
                trigger: "item", // 数据项图形触发
                axisPointer: {
                  // 指示样式
                  type: "shadow",
                  axis: "auto",
                },
                padding: 5,
                textStyle: {
                  color: "#fff", // 提示框字体颜色
                },
              },
              xAxis: {
                data: xdata, //x轴的每个标题数据!!!
                axisLine: {
                  symbol: ["none", "arrow"], // 是否显示轴线箭头
                  symbolSize: [6, 6], // 箭头大小
                  symbolOffset: [0, 7], // 箭头位置
                },
                name: "月份", //x轴名字
                type: "category",
                axisTick: {
                  alignWithLabel: true, //保证刻度线和标签对齐
                  length: 1, //刻度的长度。
                },
                axisLabel: {
                  inside: false, // 是否朝内
                  interval: 0, //横轴标题信息全部显示
                  rotate:-15,//标题-15度角倾斜显示
                  showMaxLabel: true,//最后一个显示
                  formatter: function (value) {
                      return value.split("").join("\n");
                  }, //文字竖展示
                  textStyle: {
                    color: "#000", //x轴的标题字体颜色
                    fontSize: "9", //x轴的标题字体大小
                    itemSize: "",
                  },
                },
              },
              yAxis: [
                {
                  min: 0, //y轴最小值
                  max: 1800, //y轴最大值
                  splitLine: { show: true, lineStyle: { type: "dashed" } }, //设置背景为虚线
                  type: "value",
                },
              ],
              series: [
                 {
                  data: ydata,
                  name: "销量", // 序列名称
                  type: "bar", // 类型
                  legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
                  showBackground: false,
                  barWidth: 15, // 柱形的宽度
                  itemStyle: {// 图形的形状
                    normal: {
                      barBorderRadius: [15, 15, 0, 0],//柱形图圆角
                      color: new echarts.graphic.LinearGradient(//柱形背景渐变
                        0,
                        1,
                        0,
                        0,
                        [
                          {
                            offset: 0,
                            color: "#8cd7f5", // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: "#4dc0f1", // 60% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#14aeed", // 100% 处的颜色
                          },
                        ],
                        false
                      ),
                    },
                  },//itemStyle
                  label: {//柱子上方显示文字与图标
                    normal: {
                      show: true,
                      position: "outside",//inside insideRight bottom
                      textStyle: {
                        color: "black",
                      },
                      formatter: function (params) {
                        return params.value;
                      },
                    },
                  },
                },
              ],
            };
            myChart.setOption(option);
          }
        },

##  [https://zhuanlan.zhihu.com/p/58888287][https_zhuanlan.zhihu.com_p_58888287] Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

![20210426182038884.png][]

### Echarts | 饼图引导线周围文字位置的改变 [https://www.jianshu.com/p/b1330b60ca97][https_www.jianshu.com_p_b1330b60ca97] ###

可以看到，二图中文字和线的相对位置是不一样的。需求的样式，可通过设置`label > padding`和`labelLine > length / length2`来实现。关键点在于设置一个负的`padding`。

### 饼状图： ###

var option = {
              title: {
                // text: "- 流程执行数量统计图 -",
                left: "left",
                textStyle: {
                  fontSize: 12, //图表名字字体大小
                },
              },
              tooltip: {
                trigger: "item",
              },
              legend: {
                bottom: "0%",
                itemWidth: 25, //图例标记的图形宽度
                itemHeight: 14,
                orient: "vertical",
              },
              //设置饼状图每个颜色块的颜色
              color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
              series: [
                {
                  name: "数据",
                  type: "pie",
                  radius: ["35%", "70%"], //饼状图空心占比 饼状图大小
                  //radius: "70%", //设置饼图大小
                  //center: ["50%", "50%"], //设置饼图位置 左右 上下
                  labelLine: {//设置饼图上的线条长度
                    normal: {
                        length: 20,
                        length2: 70,
                        lineStyle: {
                            color: '#333'
                        }
                    }
     
                 },
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      formatter: "{b}:{c}" + "\n\r" + "({d}%)",
                      show: true,
                      position: "left",
                      padding: [0, -40],//设置文字位置
                      textStyle: {
                         fontSize: 12, //字体大小
                         lineHeight: 18, //行高
                      },
                      rich: {//加这个rich 上面的行高生效...
                      a:{
                          fontSize: 12,
                            lineHeight: 18,
                      },
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: "12",
                      },
                    },
                  },
                  data: [
                    { value: 12, name: "待执行" },
                    { value: 23, name: "执行中" },
                    { value: 278, name: "执行成功" },
                    { value: 67, name: "执行失败" },
                    { value: 16, name: "已终止" },
                  ],
                },
              ],
            };

[https_www.cnblogs.com_tugenhua0707_p_9380378.html]: https://www.cnblogs.com/tugenhua0707/p/9380378.html
[https_blog.csdn.net_qq_28691187_article_details_112462859]: https://blog.csdn.net/qq_28691187/article/details/112462859
[https_blog.csdn.net_u012612399_article_details_53838326]: https://blog.csdn.net/u012612399/article/details/53838326
[https_blog.csdn.net_qq_36538012_article_details_115413879]: https://blog.csdn.net/qq_36538012/article/details/115413879
[https_blog.csdn.net_MistyWood_article_details_103632039]: https://blog.csdn.net/MistyWood/article/details/103632039
[https_zhuanlan.zhihu.com_p_58888287]: https://zhuanlan.zhihu.com/p/58888287
[20210413162436321.png]: /images/20221022/665751678d7246f8b577a1c8a9b674c1.png
[20210413162018245.png]: /images/20221022/fb084690578f4a9cb2aa44103fab05ef.png
[4e99ee9c7687b5fb1cfc92a173494f07.png]: /images/20221022/1b7ad3d6656e4fbc901c847675d3d4be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221022/bf5c68a33ac54259bf53639cda7591a2.png
[20210426182038884.png]: /images/20221022/278ba944c9e84424a261abc468baa6b9.png
[https_www.jianshu.com_p_b1330b60ca97]: https://www.jianshu.com/p/b1330b60ca97