echarts legend位置_vue使用Echarts vue使用Echarts滚动条

最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下

github:

loever/vueEcharts​github.com

npm安装:

npm install echarts -S

main.js 配置:

Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

项目中:引入:

 let echarts = require('echarts/lib/echarts')

这样全局引入 打包 项目会很大;

可以再demo里单独引入:需要哪个模块引入哪个模块

require('echarts/lib/chart/bar')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/dataZoom')
    require('echarts/lib/component/dataset')

Echarts:色彩包

 import macarons from 'echarts/theme/macarons'

项目中

script>
  let echarts = require('echarts/lib/echarts')
  export default {
    name: 'hello',
    data() {
      return {
        data: []
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: this.data, // 这里就放后台传过来的数据
          dataZoom: [{ // 这是滚动条插件  可以是Y轴 也可以是X轴
              type: 'inside',
              start: 0,
              end: 20
            },

            {
              start: 0,
              end: 20, //位置     下面这个是  自定义图标  格式可以是base64  url  inco 格式
              handleIcon: 'd="M625.353 69.801L844.722 343.814c0 0 11.085 102.239-87.737 59.17-57.017-25.586-77.367-79.29799999-77.367-79.298l-2.043 417.39c0 0-58.947 87.901-110.234 0l-0.934-264.25399999c0 0-63.75 86.74199999-138.747-6.064 0 0-56.248 94.518-135.27-4.57700001 0 0-56.03 109.298-112.278-9.485l0-331.75c0 0 3.25599999-25.862 48.862-55.145L625.353 69.801 625.353 69.801zM625.353 69.801"',
              handleSize: '80%', // 图标大小 
              handleStyle: { // 图标样式
                color: '#fff',
                shadowBlur: 3,
                shadowOffsetX: 4,
                shadowOffsetY: 2,
                transform: "rolate(90deg)" // 图标旋转
              }
            }

          ],
        });
      }
    },
    created() {
      //  在created 里面 直接调用   this.drawLine();    回报这个错误   因为这里时候echarts还没有加载出来   created hook: "TypeError: Cannot read property 'getAttribute' of null"
     
      /*   axios.post('*********', ).then(res => { */
          var arr = []  // 在这里把数据过滤成Ehcarts 需要的格式 
          for (var i = 0; i < 10; i++) {
            var json = {
              name: '视频广告' + i,
              type: 'bar',
              stack: '广告',
              data: [150 + i, 2 - i, 20 * i, 154 - 100, 19 - 8, 30, 40]
            }
            arr.push(json)
          }
          this.data = arr
          // 主要 echarts不能v-if 也会报错
         // this.drawLine();      axios 里面必须在调用一次 不然回报错   created hook: "TypeError: Cannot read property 'getAttribute' of null" 
      /*    }) */
    }

  }
</script>