vue 使用echarts来制作图表

vue项目中制作图表

一、开始引入依赖

npm install --save echarts 

二、失败的情况安装echarts（成功跳过这步）：

查看npm是否安装没有问题
npm -v
查看npm源
npm get registry
切换淘宝源
npm config set registry http://registry.npm.taobao.org
查看源确认切换完成
npm get registry

切换官方源 npm config set registry http://www.npmjs.org

三、安装成功项目引入echsrts

这样引入会出现失败
import echarts from 'echarts';

 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

正常引入方式
import * as echarts from 'echarts';

四、html页面代码

<div  ref="indexChart"  :style="{  '100%', height: '300px' }"></div>

五、js代码

// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(this.$refs.indexChart);
// 绘制图表
myChart.setOption({})

1.曲线图：series: type: 'line',

myChart.setOption({
　　// 提示框组件
    tooltip: {
        trigger: 'axis' // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
    },
　　// 系列 ，顶部展示的分类
    legend: {
        data: ['近七日收益','月收益']
    },
　　// 直角坐标系内绘图网格
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
　　// 
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
　　// x轴样式
    xAxis: {
        type: 'category',
        boundaryGap: false,
            data: ["1","2","3","4","5"]
                    
    },
　　// y轴样式
    yAxis: {
        type: 'value'
    },
　　// 图形样式配置
    series: [{
        name: '近七日收益',
        type: 'line',
        stack: '总量',
        data: this.opinionData
    }]
})    

2.柱状图 series: type: 'bar',

myChart.setOption({
　　　　　// 标题组件
        title: { text: "在Vue中使用echarts" },
　　　　　// 提示框组件
        tooltip: {},
　　　　　// x轴配置
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
　　　　　// y轴配置
        yAxis: {},
　　　　　// 图形样式配置
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
});

3、扇形图series: type: 'pie',

myChart.setOption({
    // 标题
    title: {
        text: '客户贡献', //标题
        x: 'center'    // 位置
    },
    // 
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"

　　　　　　// a: 标题 b：名称 c ：数值 d ：占有度 

    },
    // 模块颜色
    color: ['#31b0d5', 'pink', 'green', 'purple', 'yellow'],
    // 
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right:0,
        top: 20,
        bottom: 20,
        data: ['大米','百度','红龙','七哈','凑数']
    },
    // 图形样式配置 
    series: [{
        name: '客户贡献',
        type: 'pie',
        radius: '55%', // 大小
        itemStyle: {
                normal: {
                label: {
                    show: true,
                    formatter: "{b}:  ({d}%)", //显示标签
                },
                labelLine: {
                    show: true, //显示标签线
                    // length:10
                },
                borderWidth: 2, //设置border的宽度有多大
                borderColor: '#fff',
            },
        },
        // 数据数量和名称
        data: [
             {value: 5,name: '大米'},
             {value: 5,name: '百度'},
             {value: 5,name: '红龙'},
             {value: 5,name: '七哈'},
             {value: 5,name: '凑数'}
         ]
    }]
});                                    

4.南丁格尔图series: type: 'pie',

let data = [
        { value: 10, name: "rose1" },
        { value: 5, name: "rose2" },
        { value: 15, name: "rose3" },
        { value: 25, name: "rose4" },
        { value: 20, name: "rose5" },
        { value: 35, name: "rose6" },
        { value: 30, name: "rose7" },
        { value: 40, name: "rose8" },
      ].sort((a, b) => {
        return a.value - b.value;
      });
      let myChart = echarts.init(this.$refs.indexChart3);
      myChart.setOption({
        backgroundColor: "#E6F1FE",

        title: {
          text: "南丁格尔玫瑰图",
          subtext: "二级标题",
          x: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} :<br/> {c} ({d}%)",
          backgroundColor: "rgba(255, 255, 255, 0.5)",
          extraCssText:
            "box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.20); padding: 10px 14px;border-radius: 4px;",
          textStyle: {
            color: "#3c3c3c",
          },
        },
        legend: {
          x: "center",
          y: "bottom",
          data: [
            "rose1",
            "rose2",
            "rose3",
            "rose4",
            "rose5",
            "rose6",
            "rose7",
            "rose8",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        calculable: true,
        series: [
          {
            name: "半径模式",
            type: "pie",
            radius: [20, 110],
            center: ["50%", "50%"],
            // 是否展示成南丁格尔图
            roseType: "radius",
            // 是否启用防止标签重叠策略
            avoidLabelOverlap: true,
            label: {
              fontSize: 12,
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: data,
          },
        ],
      });

 

5.水球图series: type: 'liquidFill',

加载水球图需要安装依赖echarts-liquidfill

npm i echarts-liquidfill

如果直接安装上面的代码可能回运行不起来，因为直接安装版本是3.0.0的版本，需要2.6的版本才能运行起来

npm update echarts-liquidfill@2.0.6

使用方法

// 绘制图表
      myChart.setOption({
          // 图表主标题
          title: {
            show:false,
            text: "槽使用情况",
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: "10px",
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: "0px",
            // itemGap设置主副标题纵向间隔，单位px，默认为10，
            itemGap: 30,
            backgroundColor: "#fff",
  
            // 主标题文本样式设置
            textStyle: {
              fontSize: 16,
              fontWeight: "500",
              color: "#fff"
            }
            // 副标题文本样式设置
          },
          // 提示框组件
          tooltip: {
            trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
              color: "#fff" // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 水球图: {a}（系列名称），{b}（无），{c}（数值）
            // 使用函数模板   传入的数据值 -> value: number|Array,
            formatter: function(value) {
              return value.seriesName + ": " + value.data * 100 + "%";
            }
          },
          series: [
            {
              type: "liquidFill",
              name: "已用槽", // 系列名称，用于tooltip的显示，legend 的图例筛选
              radius: "89%", // 水球图的半径
              center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
              // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
              // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
              shape: "circle",
              phase: 0, // 波的相位弧度 不设置  默认自动
              direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
              outline: {
                show: true,
                borderDistance: 0, // 边框线与图表的距离 数字
                itemStyle: {
                  opacity: 0.9, // 边框的透明度   默认为 1
                  borderWidth: 2, // 边框的宽度
                  shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: "#fff", // 边框的阴影颜色,
                  borderColor: '#FE916F' // 边框颜色
                }
              },
              // 图形样式鼠标移上效果
              // itemStyle: {
              //   color: '#FE900F', // 水球显示的背景颜色
              //   opacity: 0.4, // 波浪的透明度
              //   shadowBlur: 10 // 波浪的阴影范围
              // },
              backgroundStyle: {
                color: "#fff" // 水球未到的背景颜色
              },
              // 图形的高亮样式
              emphasis: {
                itemStyle: {
                  opacity: 1 // 鼠标经过波浪颜色的透明度
                }
              },
              // 图形上的文本标签
              label: {
                fontSize: 26,
                fontWeight: 400,
                color: '#FE916F'
              },
              color: [
                {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: ["rgba(249, 146, 113, 0.8)"] // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: ["rgba(255, 255, 255, 1)"] // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              ],
              data: [0.6] // 系列中的数据内容数组
            }
          ]
        
      });

水球图支持非常高度定制化的需求，包括颜色（color）、大小（radius）、波的振幅（amplitude）、波长（waveLength）、相位（phase）、周期（period）、移动方向（direction）、形状（shape）、动画（waveAnimation）等等，完整的配置项参数参见水球图 API。文档有针对每个配置项的详细说明

 6.漏斗图series: type: 'funnel',

// 绘制图表
      myChart.setOption({
          title: {
              text: '漏斗图',
              subtext: '纯属虚构'
          },
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
          },
          // 控制左上角的功能组件
          // toolbox: {
          //     feature: {
          //         dataView: {readOnly: false},
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          legend: {
              data: ['展现','点击','访问','咨询','订单']
          },

          series: [
              {
                  name:'漏斗图',
                  type:'funnel',
                  left: '10%',
                  top: 60,
                  bottom: 60,
                   '80%',
                  min: 0,
                  max: 100,
                  minSize: '0%',
                  maxSize: '100%',
                  gap: 2,
                  label: {
                      show: true,
                      position: 'inside'
                  },
                  labelLine: {
                      length: 10,
                      lineStyle: {
                           1,
                          type: 'solid'
                      }
                  },
                  itemStyle: {
                      borderColor: '#fff',
                      borderWidth: 1
                  },
                  emphasis: {
                      label: {
                          fontSize: 20
                      }
                  },
                  data: [
                      {value: 60, name: '访问'},
                      {value: 40, name: '咨询'},
                      {value: 20, name: '订单'},
                      {value: 80, name: '点击'},
                      {value: 100, name: '展现'}
                  ]
              }
          ]
      });

 7.U型环series: type: 'bar',

// 绘制图表
      myChart.setOption({
          angleAxis: {
            max: 100, // 满分
            clockwise: false, // 逆时针
            // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          // 旋转角度
          startAngle: 180
        },
        radiusAxis: {
          type: 'category',
            // 隐藏刻度线
          axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
        polar: {
          center: ['50%', '30%'],
          radius: '220%' //图形大小
        },
        series: [{
          type: 'bar',
          data: [{
            name: '进度值',
            value: 10,
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#48FFFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#48FFFF' // 100% 处的颜色
                  }]
                }
              }
            },
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 18,
          barGap: '-100%', // 两环重叠
          radius: ['49%', '52%'],
          z: 2,
        },{ // 灰色环外部容积盒子
          type: 'bar',
          data: [{
          value: 50,
          itemStyle: {
            color: '#3B4068',
          }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 26,
          barGap: '-123%', // 两环重叠
          radius: ['48%', '53%'],
          z: 1
        },
        // {
        //   name: '圆点',
        //   type: 'scatter',
        //   hoverAnimation: false,
        //   data: [20],
        //   symbolSize: 34,
        //   coordinateSystem: 'polar',
        //   roundCap: true,
        //   barGap: '-80%', // 两环重叠
        //   radius: ['48%', '53%'],
        //   z: 2,
        //   itemStyle: {
        //     normal: {
        //         color: '#48FFFF',
        //         opacity: 1,
        //     }
        //   }
        // }
        ]
      });

 更多图案选取

https://echarts.apache.org/examples/zh/index.html

六、正常运行代码：

mounted() {
      this.drawLine();
},
methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.indexChart);
      // 绘制图表
      myChart.setOption({
       ....
      })  
    }
  }

七、运行的时候出现问题：

百度了下，说是dom没有加载完的问题，要放在this.$nextTick改成

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  }

这样可以了。

后来测试 了下，用vif控制 隐藏与显示也是报这样的错。。vshow不会。

原理还是一样吧，vif是dom不加载 的。vshow只是把dom display:none，还是加载了