[JavaScript知识库]echarts学习--持续更新

代码

1.

<template>
  <div>
    <div id="echarts1" style="width: 600px; height: 400px"></div>
    <div id="echarts2" style="width: 600px; height: 400px"></div>
    <div id="echarts3" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() { },
  mounted() {
    this.echarts1()
    this.echarts2()
    this.echarts3()
  },
  methods: {
    // 有不懂的可以看echarts官网的api，或者百度
    echarts1() {
      let myEcharts = this.$echarts.init(document.getElementById('echarts1'))
      let option = {
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']// 这个是上面的那个legend，
        },
        tooltip: {
          show: true,
          trigger: 'item'// 这个是那个tooltip
        },
        xAxis: {
          // type: 'value',
          // type: 'category',
          data: ['01/22', 2, 3, 4, 5, 6, 7], // 这里可以随便设置，名字，数字啥的都行
          // min: 1,
          // max: 7,
          // splitNumber: 2,
          axisLabel: {
            interval: 1
          }// 这里是设置x坐标间隔的
        },
        yAxis: {
          type: 'value'// 这里是设置y轴标尺的，不设置默认是自动计算的，根据你传的数据，seriers中
          // data: [10, 20, 30, 40, 50, 60]//设置的话，就会写死
        },
        series: [{
          name: '邮件营销',
          type: 'bar',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
        }, {
          name: '联盟广告',
          type: 'bar',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]// 这里是传数据进去
        }]// series里传两个，就可以看到，两个是叠起来的，柱状图
      }
      myEcharts.setOption(option)
    },
    echarts2() {
      let myEcharts = this.$echarts.init(document.getElementById('echarts2'))
      let option = {
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          left: 10,
          bottom: 0
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        xAxis: {
          // type: 'value',
          data: ['01 / 12', 2, 3, 4, 5, 6, 7]
          // min: 1,
          // max: 7,
          // splitNumber: 2,
          // axisLabel: {
          //   interval: 1
          // }
        },
        yAxis: {
          type: 'value'
          // data: [10, 20, 30, 40, 50, 60]
        },
        series: [
          {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            // label: {
            //   show: true,
            //   backgroundColor: '#0f0'
            // }
            // showBackground: true,
            // backgroundStyle: {
            //   color: '#0f0'
            // }
            itemStyle: {// 设置柱子颜色
              // normal: {
              //   color: function (params) {
              //     var colorlist = ['#DA251D', '#E67716', '#FBC300', '#11440f', '#32585a', '#00ff77', '#0f0']
              //     return colorlist[params.dataIndex]
              //   }
              // }
              color: '#0f0'
            }
          },
          {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          }]
      }
      myEcharts.setOption(option)
    },
    echarts3() {
      let myEcharts = this.$echarts.init(document.getElementById('echarts3'))
      let option = {
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          left: 10,
          bottom: 0
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        xAxis: {
          // type: 'value',
          data: ['01 / 12', 2, 3, 4, 5, 6, 7]
          // min: 1,
          // max: 7,
          // splitNumber: 2,
          // axisLabel: {
          //   interval: 1
          // }
        },
        yAxis: {
          type: 'value'
          // data: [10, 20, 30, 40, 50, 60]
        },
        series: [
          {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            data: [10, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                color: function (params) { // 设置每个柱子不同颜色
                  var colorlist = ['#DA251D', '#E67716', '#FBC300', '#11440f', '#32585a', '#00ff77', '#0f0']
                  return colorlist[params.dataIndex]
                }
              }
            }
          }
          // {
          //   name: '联盟广告',
          //   type: 'bar',
          //   stack: '总量',
          //   data: [220, 182, 191, 234, 290, 330, 310]
          // }
        ]
      }
      myEcharts.setOption(option)
    }
  }
}
</script>
<style lang="scss"  scoped>
</style>