echart：示例

1. 可视化排名
   不可行链接
   https://mp.weixin.qq.com/s/W6kBSMFqzm5ureMmxoe5zg
   推荐视频链接

2.echarts在线定制

– 0）开始使用

// https://www.pianshen.com/article/67521069841
报错Cannot read property ‘echarts’ of undefined
5.0版本有问题，狗r的百度，下载这个引入
npm install echarts@4.9.0

vue中使用

两种引入方式

// public/index.html
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts-en.common.min.js"></script>

// vue.config.js
module.exports = {
  configureWebpack: {
    entry: {
      app: './src/main.js'
    },
    externals: {
      echarts: "echarts"
    }
  }
}

import echarts from 'echarts'

使用

// 有固定大小的容器
 <div id="main" style="width: 400px; height: 200px"></div>

//  指定图表的配置项和数据
        var option = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        };

      var myChart = echarts.init(document.getElementById('main'));
      myChart.setOption(option);

适配

在这里插入代码片

– 1）基础图表

– 2）定制图表
先在官网找类似的实例。再按需求定制。

    <div
      id="main6"
      style="width: 400px; height: 200px; background-color: black;margin-bottom:2px;"
    ></div>
    <div
      id="main7"
      style="width: 400px; height: 200px; background-color: black;margin-bottom:2px;"
    ></div>


    let option6 = {
      title: {
        text: '柱状图-就业行情',
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
        left: 'center',
        top: 10
      },
      color: ['skyblue'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: { // 坐标轴刻度
            show: false
          },
          axisLine: { // 坐标轴轴线
            show: false
          },
          axisLabel: { // 刻度标签
            color: '#fff',
            fontSize: 12
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: { // 刻度标签
            color: '#fff',
            fontSize: 12,
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              fontSize: 12,
            }
          },
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '24%',
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            barBorderRadius: [4, 4, 4, 4],
          },

        }
      ]
    };


    var myColor = ['red', 'pink', 'skyblue', '#pme', '#ddf', '#bwe']
    var option7 = {
      title: {
        text: '世界人口总量',
        subtext: '数据来自网络',
        textStyle: {
          color: '#fff',
          fontSize: 18,
        },
        left: 'center',
        top: 10,
        subtextStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      legend: {
        data: ['2011年', '2012年']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        show: false
      },
      yAxis: [
        {
          type: 'category',
          data: ['HTML5', 'CSS3', 'JAVASCRIPT', 'VUE', 'NODE'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: { // 刻度标签
            color: '#fff',
            fontSize: 12,
          },
        }, {
          data: [664, 793, 610, 350, 702],

          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: { // 刻度标签
            color: '#fff',
            fontSize: 12
          },
        }
      ],
      series: [
        {
          type: 'bar',
          data: [70, 34, 60, 78, 69],
          barWidth: 15,
          label: {
            fontSize: 12,
            show: true,
            position: 'inside',
            // 自动解析data中的数据
            formatter: '{c}%'
          },
          itemStyle: {
            // 给柱子设置不同的颜色 （给itemStyle里的color设置返回值函数）
            color: function (params) {
              console.log(params)
              return myColor[params.dataIndex]
            },
            barBorderRadius: [20],
            borderWidth: 10
          },
          yAxisIndex: 0
        },
        {
          type: 'bar',
          data: [100, 100, 100, 100, 100],
          itemStyle: {
            barBorderRadius: [20],
            borderColor: 'red',
            // 没有颜色
            color: 'none',
          },
          barWidth: 17,
          yAxisIndex: 1
        }
      ]
    };

      var myChart6 = echarts.init(document.getElementById('main6'));
      myChart6.setOption(option6);
      var myChart7 = echarts.init(document.getElementById('main7'));
      myChart7.setOption(option7);

更多的echarts图标看这个： 链接