а дальше , что делать?

Радуйся работающему коду

Или не работает?

app.js получился вот такой

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"
var echarts = require('echarts');

// initialize echarts instance with prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// draw chart
myChart.setOption({
 title: {
   text: 'ECharts entry example'
 },
 tooltip: {},
 xAxis: {
   data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']
 },
 yAxis: {},
 series: [{
   name: 'sales',
   type: 'bar',
   data: [5, 20, 36, 10, 10, 20]
 }]
});

а как теперь прописать в index.html.eex что бы график появился?

Эхх, совсем ты в фронте не понимаешь

У тебя должен быть в хтмл тег с айди main

Пытаюсь разобраться

Можно пример кода?

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

Вот тут это указываешь. Ищешь элемент по айди main и инициализируешь график

Пример html? Внутри body тега напиши <div id=“main”> </div>
Если там нет его

Не работает так

<section>
<div id=“main”> </div>
</section>

<section class="phx-hero">
 <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
 <p>A productive web framework that<br/>does not compromise speed or maintainability.</p>
</section>

<section class="row">
 <article class="column">
   <h2>Resources</h2>
   <ul>
     <li>
       <a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
     </li>
     <li>
       <a href="https://github.com/phoenixframework/phoenix">Source</a>
     </li>
     <li>
       <a href="https://github.com/phoenixframework/phoenix/blob/v1.4/CHANGELOG.md">v1.4 Changelog</a>
     </li>
   </ul>
 </article>
 <article class="column">
   <h2>Help</h2>
   <ul>
     <li>
       <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
     </li>
     <li>
       <a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
     </li>
     <li>
       <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
     </li>
   </ul>
 </article>
</section>

это index.html.eex

Ошибка какая?

Uncaught TypeError: Cannot read property 'getAttribute' of null
   at Object.getAttribute (model.js:494)
   at getInstanceByDom (echarts.js:1884)
   at Object.init (echarts.js:1807)
   at eval (app.js:24)
   at Object../js/app.js (app.js:105)
   at webpack_require (app.js:20)
   at eval (app.js:1)
   at Object.0 (app.js:5517)
   at webpack_require (app.js:20)
   at app.js:69

Попробуй обернуть твой добавленный js в блок

document.addEventListener('DOMContentLoaded', function() {
    // тут код для графиков 
}, false);

var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
document.addEventListener('DOMContentLoaded', function () {
 myChart.setOption({
   title: {
     text: 'ECharts entry example'
   },
   tooltip: {},
   xAxis: {
     data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']
   },
   yAxis: {},
   series: [{
     name: 'sales',
     type: 'bar',
     data: [5, 20, 36, 10, 10, 20]
   }]
 });
}, false);

djn nfr&