Подробные статьи о интерфейсе Vue 丨 Как элегантно использовать Echarts в проекте (Часть 1)

Vue.js

написать впереди

Недавно в силу каких-то форс-мажорных обстоятельств я перешел в компанию, предоставляющую образовательные услуги для колледжей и университетов, и догнал ее, как только пришел в компанию.Рефакторинг проектов на стороне ПК, и я в основном отвечаю за数据可视化Этот модуль на самом деле не сложный, но я также наступил на некоторые ямы в процессе использования Echarts.

Так что с этой статьей, эта статья разделена на две части.

Следующий адрес:Подробные статьи о интерфейсе Vue 丨 Как элегантно использовать Echarts в проекте (ниже)

В этой статье я в основном представлю

  • Как использовать Echarts в проекте vue
  • Как убедиться, что электронные диаграммы правильно отображаются на странице и могут меняться вместе с окном

Надеюсь, что после прочтения мои друзья смогут оказаться в проектеОсвойте правильный способ использования Echarts, а на моей базе я на некоторые ямы меньше наступаю.

Без дальнейших церемоний, давайте начнем.

Использование Echarts в проекте vue

Установить

Установка на самом деле относительно проста, откройте инструмент командной строки прямо в проекте, выполнитеnpm install echarts --saveтакже может быть сокращено какnpm i echarts -S, который должен установить Echarts в рабочую среду проекта.

После завершения установки нам нужно открытьmain.jsфайл, найдите место выше для импортаEcharts, и смонтируйте его в прототип vue, конкретный код выглядит следующим образом

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

использовать

После простой установки и монтирования прототипа мы можем использовать его прямо на нужной странице.

Сначала нам нужно создать контейнер, пустой div, куда можно поместить Echarts.

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>

здесь я использовалrefЧтобы получить узел DOM, основная причина заключается в том, чтобы избежать инициализации контейнера Echarts до его создания.

После создания контейнера данные можно использовать для рендеринга Echarts.Для удобства всех друзей я вставлю сюда общедоступный код.Те, кому нужно использовать Echarts в проекте, могут скопировать его напрямую~

mounted(){
	this.setMyEchart()  //页面挂载完成后执行
},
methods: {
    setMyEchart() {
        const myChart = this.$refs.myChart;  //通过ref获取到DOM节点
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型调取Echarts的初始化方法
            const option = {};  //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
            thisChart.setOption(option);  //将编写好的配置项挂载到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //页面大小变化后Echarts也更改大小
            });
        }
    }
}

Правильное отображение электронных диаграмм на странице

После того, как базовая структура написана, вы можете перейти кОфициальный пример EchartsНайдите нужную схему и скопируйтеoptionВставьте содержимое на страницуoption对象в.

Здесь я используюРадарная диаграммаВ качестве примера, чтобы показать, когда я вставляю код, страница выглядит так.

только ширина100px, на самом деле это потому, что Echarts не распознает процентную систему, поэтому он распознает 100% как 100 пикселей. Когда мы изменяем ширину и высоту браузера, запускаемthisChart.resize();, диаграмма может отображаться нормально, но мы не можем изменить ширину и высоту браузера после входа пользователя. Официальное предложение состоит в том, что мы устанавливаем определенную ширину и высоту для контейнера Echarts, чтобы обеспечить отображение, что, очевидно, не хорошее адаптационное решение.

Итак, мы должны установитьдинамическая ширина: На этом шаге мы должны сначала получить ссылку на ширину (эта ссылка может быть в процентах от ширины, потому что, когда мы получим ширину, она будет преобразована в реальную ширину в пикселях), и ссылка может бытьchart的wrapили смежные DOM-узлы одинаковой ширины.

Возьмите мою страницу в качестве примера, получите ширину блока ниже, предполагая, что имя класса этого divcontent, то мы можем написать следующий код

document.querySelector('#myChart').style.width =  document.querySelector('.content').clientWidth

Таким образом, он может быть установлен на определенную ширину в начале, и в то же время его можно адаптивно изменить после изменения ширины и высоты браузера.

Что касается содержимого, которое необходимо внести в них, например, найти дополнительные элементы конфигурации, на которые можно ссылаться.эта ссылкаучиться.

В заключение

После вышеупомянутого исследования, я полагаю, у вас есть предварительное пониманиеEchartsИспользование на самом деле относительно простое.Важно то, что вы хотите показать.Выбрав это, вы можете скопировать это в наш шаблон.

В следующей части я в основном расскажу, как заполнять данные, возвращаемые API-интерфейсом, в Echarts.

Подробные статьи о интерфейсе Vue 丨 Как элегантно использовать Echarts в проекте (ниже)

Наконец, дайте все коды для справки.

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
<div class="content"></div>
<script>
mounted() {
    document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth;
    this.setMyEchart();
  },
  methods: {
      setMyEchart() {
        const myChart = this.$refs.myChart;  //通过ref获取到DOM节点
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型调取Echarts的初始化方法
            const option = {
          tooltip: {
            confine: true,
            enterable: true //鼠标是否可以移动到tooltip区域内
          },
          legend: {
            // top : '96%',                    // 图例距离顶部边距
            textStyle: {
              coFlor: "#202124",
              fontWeight: "bold",
              fontSize: "14"
            },
            data: ["学生个人", "班级平均"]
          },

          calculable: true,
          color: ["#00CA90", "#4285F4"],
          radar: {
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "#999",
                fontSize: "10",
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              { name: "出勤率", max: 1 },
              { name: "作业提交率", max: 1 },
              { name: "话题参与率", max: 1 },
              { name: "表现得星数", max: 1 },
              { name: "互动参与率", max: 1 }
            ],
            radius: 80
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [
                      0.85,0.94,0.24,0.56,0.23
                  ],
                  name: "学生个人"
                },
                {
                  value: [
                    0.90,0.85,0.37,0.85,0.52
                  ],
                  name: "班级平均"
                }
              ]
            }
          ]
        };  //这里是我配置好的一个雷达图，你可以复制到echart示例网查看效果
            thisChart.setOption(option);  //将编写好的配置项挂载到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //页面大小变化后Echarts也更改大小
            });
        }
      }
    }
  }
</script>

Эпилог

Выше все содержание этой статьи.Если есть какие-то неправильные места, пожалуйста, поправьте меня.

Спасибо за прочтение, если вы нашли это полезным, пожалуйста, поставьте лайк или сделайте репост.

Углубленная серия переднего плана представляет собой серию наступаний на ямы. Это исследование и краткое изложение проблем, с которыми я столкнулся в работе и учебе, а также ям, на которые я наступил. Это записано и опубликовано здесь, а также рефлексия и проверка собственных навыков.

Дорога впереди длинная, и ямы постоянно наступают.

Углубленная серия интерфейсов постоянно обновляется...

Выше 2020-01-13.

Категории