（不支持小程序【支持app和H5】） 

1.首先在uni-app中不支持包下载所以得自己先新建一个项目，然后进入到这个目录下，执行 npm init，接下来一路回车即可。

2.下载所需要的库 

 npm install echarts mpvue-echarts --save 

3.引用（5是页面代码）

 import echarts from '@/components/echarts/echarts.vue';

 下面的是 echarts.vue的代码 、

代码里script.src = ‘./static/echarts.min.js’   （更改路径不还是的话建议使用此路径） 在【4里面】

 <template>  <view>   <view class="echarts" :prop="option" :change:prop="echarts.update"></view>  </view> </template>  <script>  export default {   name: 'Echarts',   props: {    option: {     type: Object,     required: true    }   }  } </script>  <script module="echarts" lang="renderjs">  export default {   data() {    return {     chart: null    }   },   mounted() {    if (typeof window.echarts === 'object') {     this.init()    } else {     // 动态引入类库     const script = document.createElement('script')     script.src = './static/echarts.min.js'     // script.src = './static/echarts/echarts.min.js'     script.onload = this.init     document.head.appendChild(script)    }   },   methods: {    /**     * 初始化echarts     */    init() {     this.chart = echarts.init(this.$el)     this.update(this.option)    },    /**     * 监测数据更新     * @param {Object} option     */    update(option) {     if (this.chart) {      // 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数      if (option) {       // tooltip       if (option.tooltip) {        // 判断是否设置tooltip的位置        if (option.tooltip.positionStatus) {         option.tooltip.position = this.tooltipPosition()        }        // 判断是否格式化tooltip        if (option.tooltip.formatterStatus) {         option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)        }       }      }      // 设置新的option      this.chart.setOption(option, option.notMerge)     }    },    /**     * 设置tooltip的位置，防止超出画布     */    tooltipPosition() {     return (point, params, dom, rect, size) => {      //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小      let x = point[0]      let y = point[1]      let viewWidth = size.viewSize[0]      let viewHeight = size.viewSize[1]      let boxWidth = size.contentSize[0]      let boxHeight = size.contentSize[1]      let posX = 0 //x坐标位置      let posY = 0 //y坐标位置      if (x < boxWidth) { //左边放不开       posX = 5      } else { //左边放的下       posX = x - boxWidth      }      if (y < boxHeight) { //上边放不开       posY = 5      } else { //上边放得下       posY = y - boxHeight      }      return [posX, posY]     }    },    /**     * tooltip格式化     * @param {Object} unit 数值后的单位     * @param {Object} formatFloat2 是否保留两位小数     * @param {Object} formatThousands 是否添加千分位     */    tooltipFormatter(unit, formatFloat2, formatThousands) {     return params => {      let result = ''      unit = unit ? unit : ''      for (let i in params) {       if (i == 0) {        result += params[i].axisValueLabel       }       let value = '--'       if (params[i].data !== null) {        value = params[i].data        // 保留两位小数        if (formatFloat2) {         value = this.formatFloat2(value)        }        // 添加千分位        if (formatThousands) {         value = this.formatThousands(value)        }       }       // #ifdef H5       result += 'n' + params[i].seriesName + '：' + value + ' ' + unit       // #endif              // #ifdef APP-PLUS       result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit       // #endif      }      return result     }    },    /**     * 保留两位小数     * @param {Object} value     */    formatFloat2(value) {     let temp = Math.round(parseFloat(value) * 100) / 100     let xsd = temp.toString().split('.')     if (xsd.length === 1) {      temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'      return temp     }     if (xsd.length > 1) {      if (xsd[1].length < 2) {       temp = temp.toString() + '0'      }      return temp     }    },    /**     * 添加千分位     * @param {Object} value     */    formatThousands(value) {     if (value === undefined || value === null) {      value = ''     }     if (!isNaN(value)) {      value = value + ''     }     let re = /d{1,3}(?=(d{3})+$)/g     let n1 = value.replace(/^(d+)((.d+)?)$/, function(s, s1, s2) {      return s1.replace(re, '$&,') + s2     })     return n1    }   }  } </script>  <style lang="scss" scoped>  .echarts {   width: 100%;   height: 100%;  } </style>

4.echarts.min.js   代码

https://download.csdn.net/download/weixin_42120669/12419947

 5.随便起一个Vue页面 复制下面代码

 <template>  <view class="viewimg">   <view>    <view>echarts示列</view>    <echarts :option="option" style="height: 300px;"></echarts>    <button @click="updateClick">更新数据</button>   </view>   <view><echarts :option="optionone" style="height: 400px;"></echarts></view>   <view><echarts :option="optiontwo" style="height: 400px;"></echarts></view>  </view> </template>  <script> import echarts from '@/components/echarts/echarts.vue'; export default {  data() {   return {    option: {},    optionone:{},    optiontwo:{}   };  },  onLoad() {   console.log(777777);  },  components: {   echarts  },  mounted() {   this.logstatrt();   this.logstatrtone();   this.logstatrttwo();  },  methods: {   logstatrt() {    console.log('初次调用');    this.option = {     backgroundColor: '#011246',     tooltip: {      trigger: 'axis',      axisPointer: { type: 'shadow' }     },     grid: {      top: '25%',      right: '45',      bottom: '20',      left: '30'     },     legend: {      data: [{ name: '人保' }, { name: '太保' }, { name: '平安' }, { name: '人保增速' }, { name: '太保增速' }, { name: '平安增速' }],      top: '0%',      textStyle: {       color: 'rgba(255,255,255,0.9)' //图例文字      }     },     dataZoom: [      {       type: 'slider',       realtime: true,       //移动端展示方式       handleSize: '100%', //滑动条两侧的大小       start: 0,       end: 50      }     ],     grid: {      left: '3%',      right: '4%',      bottom: '15%',      height: '70%',      containLabel: true     },     xAxis: [      {       type: 'category',       data: ['2015', '2016', '2017', '2018', '2019'],       axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },       axisLabel: { textStyle: { color: 'rgba(255,255,255,.7)', fontSize: '14' } }      }     ],     yAxis: [      {       type: 'value',       name: '单位万',       splitLine: {        show: false       },       axisLabel: {        show: true,        fontSize: 14,        color: 'rgba(255,255,255,.6)'       },       axisLine: {        min: 0,        max: 10,        lineStyle: { color: 'rgba(255,255,255,.4)' }       } //左线色      },      {       type: 'value',       name: '增速',       show: true,       axisLabel: {        show: true,        fontSize: 14,        formatter: '{value} %',        color: 'rgba(255,255,255,.6)'       },       axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } }, //右线色       splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } } //x轴线      }     ],     series: [      {       name: '人保',       type: 'bar',       data: [35, 36.6, 38.8, 40.84, 41.6],       // "barWidth": "30",       itemStyle: {        normal: {         color: {          type: 'linear',          x: 0.5,          y: 0.5,          r: 0.5,          colorStops: [           {            offset: 0,            color: '#00FFE3' // 0% 处的颜色           },           {            offset: 1,            color: '#4693EC' // 100% 处的颜色           }          ],          globalCoord: false // 缺省为 false         }        }       }       // "barGap": "0.2"      },      {       name: '太保',       type: 'bar',       data: [16, 14.8, 14.1, 15, 16.3],        color: {        type: 'linear',        x: 0.5,        y: 0.5,        r: 0.5,        colorStops: [         {          offset: 0,          color: '#248ff7' // 0% 处的颜色         },         {          offset: 1,          color: '#6851f1' // 100% 处的颜色         }        ],        globalCoord: false // 缺省为 false       }      },      {       name: '平安',       type: 'bar',       data: [10.2, 9.2, 9.1, 9.85, 8.9],       color: {        type: 'linear',        x: 0.5,        y: 0.5,        r: 0.5,        colorStops: [         {          offset: 0,          color: '#fccb05' // 0% 处的颜色         },         {          offset: 1,          color: '#f5804d' // 100% 处的颜色         }        ],        globalCoord: false // 缺省为 false       }      },      {       name: '人保增速',       type: 'line',       yAxisIndex: 1,        data: [0, 6.01, 5.26, 1.48],       lineStyle: {        normal: {         width: 2        }       },       itemStyle: {        normal: {         color: '#86d370'        }       },       smooth: true      },      {       name: '太保增速',       type: 'line',       yAxisIndex: 1,        data: [0, -4.73, 6.38, 8.67],       lineStyle: {        normal: {         width: 2        }       },       itemStyle: {        normal: {         color: '#3496f8'        }       },       smooth: true      },      {       name: '平安增速',       type: 'line',       yAxisIndex: 1,        data: [0, -1.09, 8.24, -9.64],       lineStyle: {        normal: {         width: 2        }       },       itemStyle: {        normal: {         color: '#fbc30d'        }       },       smooth: true      }     ]    };   },   logstatrtone(){    this.optionone = {        backgroundColor: '#0c1e55',        color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f','#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee', '#50b332'],            tooltip: {            trigger: 'item',            // formatter: "   {a} <br/>{b} : {c} ({d}%)"            formatter: "   企业数：{c}"        },        legend: { // 图例-图上面的分类            // orient: 'vertical',            // right: 30,            //   icon: 'rect',//长方形            icon: 'circle',            top: "1%",            itemWidth: 10,            itemHeight: 10,            // itemGap: 13,           data: ['16℃以下', '16-18℃', '18-20℃', '20-22℃','22-24℃','24-26℃','26℃以上' ],            // right: '56%',            textStyle: {                fontSize: 14,                color: '#a6cde8',                lineHeight: 49            },            formatter: function(name) {                return "" + name + ""            },            padding: [2, 2]        },        grid: {            top: '20%',            left: '53%',            right: '10%',            bottom: '6%',            containLabel: true        },            series: [{            label: {                normal: {                        formatter: '{b|{b}：} {c} n  {per|{d}%} ',                        rich: {                        }                    },                emphasis: {                    show: true,                }            },            // labelLine: {            //     normal: {            //         show: false            //     }            // },            name: '访问来源',            type: 'pie',            radius: '55%',            center: ['50%', '60%'],            data:[{                    value: 195,                    name: '16℃以下'                },                {                    value: 185,                    name: '16-18℃'                },                {                    value: 260,                    name: '18-20℃'                },                {                    value: 213,                    name: '20-22℃'                },                {                    value: 52,                    name: '22-24℃'                },                {                    value: 35,                    name: '24-26℃'                },                {                    value: 46,                    name: '26℃以上'                },            ],            itemStyle: {                emphasis: {                    shadowBlur: 10,                    shadowOffsetX: 0,                    shadowColor: 'rgba(0, 0, 0, 0.5)'                }            },              labelLine: {                normal: {                    length: 5,                    length2: 1,                    smooth: true,                }            },        }]    };   }, logstatrttwo(){  var m2R2Data = [{          value: 335,          value1: 234,          legendname: 'Ⅰ类',          name: "Ⅰ类",          itemStyle: {              color: "#8d7fec"          }      },      {          value: 310,          value1: 314,          legendname: 'Ⅱ类',          name: "Ⅱ类",          itemStyle: {              color: "#5085f2"          }      },      {          value: 234,          value1: 235,          legendname: 'Ⅲ类',          name: "Ⅲ类",          itemStyle: {              color: "#e75fc3"          }      },      {          value: 154,          value1: 213,          legendname: 'Ⅳ类',          name: "Ⅳ类",          itemStyle: {              color: "#f87be2"          }      },      {          value: 335,          value1: 321,          legendname: 'Ⅴ类',          name: "Ⅴ类",          itemStyle: {              color: "#f2719a"          }      },    ];    this.optiontwo = {      title: [{              text: '全网调控情况',              textStyle: {                  fontSize: 16,                  color: "black"              },              left: "35%"          },          {              text: '全网均温',              subtext: 44.5 + '℃',              textStyle: {                  fontSize: 15,                  color: "black"              },              subtextStyle: {                  fontSize: 20,                  color: 'black'              },              textAlign: "center",              x: '40%',              y: '44%',          }      ],      tooltip: {          trigger: 'item',          formatter: function(parms) {              var str = parms.seriesName + "</br>" +                  parms.marker + "" + parms.data.legendname + "</br>" +                  "当前温度：" + parms.data.value + "</br>" +                  "目标温度：" + parms.data.value1 + "</br>" +                  "占比：" + parms.percent + "%";              return str;          }      },      legend: {          type: "scroll",          orient: 'vertical',          left: '80%',          align: 'left',          top: 'middle',          textStyle: {              color: '#8C8C8C'          },        },      series: [{          name: '全网调控情况',          type: 'pie',          center: ['40%', '50%'],          radius: ['40%', '65%'],          clockwise: false, //饼图的扇区是否是顺时针排布          avoidLabelOverlap: false,          itemStyle: { //图形样式              normal: {                  borderColor: '#ffffff',                  borderWidth: 1,              },          },          label: {              normal: {                  show: true,                  position: 'outter',                  formatter: function(parms) {                      return parms.data.legendname                  }              }          },          labelLine: {              normal: {                  length: 15,                  length2: 13,                  smooth: true,              }          },          data: m2R2Data      }]  }; },   /**    * 更新数据    */   updateClick() {    this.option = {     notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并     xAxis: {      type: 'category',      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {      type: 'value'     },     series: [      {       data: [120, 200, 150, 80, 70, 110, 130],       type: 'bar',       showBackground: true,       backgroundStyle: {        color: 'rgba(220, 220, 220, 0.8)'       }      }     ]    };   }  } }; </script> <style> .viewimg {  height: 100%;  /* background: #d1e9e9; */ } </style> 

demo下载地址

 https://download.csdn.net/download/weixin_42120669/12419908